当前位置： 首页 > news >正文

单文件上传

news 2026/2/8 17:21:11

随着Web应用的普及，文件上传功能成为许多网站和应用不可或缺的一部分。本文整理了个人学习过程中的笔记，为开发者提供全面的了解和实践经验。

单文件上传

在早期的html应用中，都是使用form标签中嵌套来实现文件上传的，具体代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>单文件上传示例</title>
</head>
<body><form action="/upload" method="post" enctype="multipart/form-data"><label for="fileInput">选择文件：</label><input type="file" id="fileInput" name="fileInput"><button type="submit">上传文件</button></form>
</body>
</html>

上述实现方式是最原始也是最简单的代码实现，详细的元素说明如下

  • <form> 元素包含了文件上传的整个表单，action 属性指定了处理文件上传的服务器端脚本，method 属性指定了表单提交的HTTP方法为 post，enctype 属性设置为 multipart/form-data 以支持文件上传。
  • <label> 元素用于显示文本标签，上述示例中label跟元素联动，提升用户体验。
  • <input type="file"> 是文件上传的核心元素，它创建了一个文件选择框。id 属性用于关联 <label> 元素，name 属性用于标识在提交表单时的字段名。
  • <button> 元素用于提交表单。

这只是一个基本的HTML结构，实际上，要使文件上传功能更加完善，还需要使用后端技术来处理文件的接收和存储。涉及后端的代码逻辑就不在这里陈述了。后续会专门编写后端接收文件上传的相关文章。

另外单文件上传还可以结合JavaScript语言来实现，以下是一个简单的例子，演示如何使用JavaScript结合HTML实现文件上传，并通过Ajax发送文件到服务器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JavaScript文件上传示例</title>
</head>
<body><input type="file" id="fileInput" /><button onclick="uploadFile()">上传文件</button><progress id="progressBar" value="0" max="100"></progress><div id="status"></div><script>function uploadFile() {var fileInput = document.getElementById('fileInput');var progressBar = document.getElementById('progressBar');var status = document.getElementById('status');var file = fileInput.files[0];if (!file) {status.innerHTML = '请选择文件';return;}var formData = new FormData();formData.append('file', file);var xhr = new XMLHttpRequest();xhr.open('POST', '/upload', true);xhr.upload.onprogress = function (e) {if (e.lengthComputable) {var percent = (e.loaded / e.total) * 100;progressBar.value = percent;status.innerHTML = percent.toFixed(2) + '% 上传中...';}};xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {status.innerHTML = '上传完成';} else if (xhr.readyState === 4 && xhr.status !== 200) {status.innerHTML = '上传失败';}};xhr.send(formData);}</script>
</body>
</html>

本人这里也提供一个基于Vue3的文件上传实现，代码如下

<template><el-dialogclass="upload-file-dialog"title="文件上传"width="600px"height="300px"><el-row class="file-info"><el-col :span="12" class="file-info-name"><span class="title">当前文件夹：</span><span class="content">{{folderObj.filename}}</span></el-col><el-col :span="12" class="file-info-update-time"><span class="title">最后更新时间：</span><span class="content">{{folderObj.updateTime}}</span></el-col></el-row><el-row><el-col><el-upload:auto-upload="false"class="upload-demo"dragaction="#"multiple:on-change="uploadContext.handleChange"v-model:file-list="formData.fileList"><el-icon class="el-icon--upload"><upload-filled /></el-icon><div class="el-upload__text">拖动文件到这里或者<em>点击上传</em></div><template #tip><div class="el-upload__tip">文件大小不超过10MB</div></template></el-upload></el-col></el-row><el-row class="btns"><el-col><el-button type="primary" @click="uploadContext.upload">开始上传</el-button></el-col></el-row></el-dialog>
</template><script setup>
import { onMounted, reactive, getCurrentInstance } from 'vue'
import axios from 'axios'
const props = defineProps(['folderObj'])
const that = getCurrentInstance()
const ctx = that.ctx    //当前实例的上下文
const formData = reactive({fileList: [],imgSrc: ''
})const uploadContext = {upload: ()=>{formData.fileList.forEach((item, index)=>{let formData = new FormData()formData.append('fileId', item.uid)formData.append('filename', item.name)formData.append('file', item.raw)formData.append('fileSize', item.size)formData.append('fileSizeDesc', item.size + '')formData.append('fileSuffix', item.name.substring(item.name.lastIndexOf(".")+1))formData.append('identifier', item.raw.type)axios.post('/pan/file/upload', formData).then(res=>{console.log(res)	//显示上传文件结果})})},/*** 文件上传控件变化处理，这里可以增加进度条的显示处理逻辑，本人这里就处理这块代码逻辑了*/handleChange: (uploadFile, uploadFileList)=>{console.log(formData.fileList)}
}</script><style lang="scss">
.upload-file-dialog {.el-dialog__body{padding: 10px 15px;}.file-info{padding: 0 0 5px 0;.file-info-update-time{text-align: right;}}.btns{.el-col{text-align: right;}}
}
</style>

相关文章：

单文件上传

随着Web应用的普及&#xff0c;文件上传功能成为许多网站和应用不可或缺的一部分。本文整理了个人学习过程中的笔记&#xff0c;为开发者提供全面的了解和实践经验。 单文件上传 在早期的html应用中&#xff0c;都是使用form标签中嵌套来实现文件上传的&#xff0c;具体代码如…...

编程日记 2024/1/6 22:59:45

美经济学家预测，明年美股或将大跌86%，你怎么看？

年初至今&#xff0c;标准普尔500指数上涨25%&#xff0c;道琼斯指数上涨13%&#xff0c;以科技股为主的纳斯达克指数大涨了44%。 美国经济学家哈里斯登特近日预测&#xff0c;这种牛市是“100%人为印钞的结果”&#xff0c;而这一巨大的泡沫将在2024年破灭&#xff0c;届时美…...

编程日记 2024/1/6 22:56:42

【BIAI】lecture 3 - GD BP CNN Hands-on

GD & BP & CNN & Hands-on 专业术语 gradient descent (GD) 梯度下降 back propagation (BP) 向传播 Convolutional Neural Network (CNN) 卷积神经网络 forward propagation 前向传播 biologically symmetry 生物对称性 synaptic 突触 axon 轴突 课程大纲 The go…...

编程日记 2024/1/6 22:54:41

计算机Java项目｜基于SpringBoot+Vue的图书个性化推荐系统

项目编号&#xff1a;L-BS-GX-10 一&#xff0c;环境介绍 语言环境&#xff1a;Java: jdk1.8 数据库&#xff1a;Mysql: mysql5.7 应用服务器&#xff1a;Tomcat: tomcat8.5.31 开发工具&#xff1a;IDEA或eclipse 二&#xff0c;项目简介 图片管理系统是一个为学生和…...

编程日记 2024/1/6 22:50:38

lenovo联想小新Pro-13 2020 Intel IML版笔记本电脑(82DN)原装出厂Win10系统镜像

链接&#xff1a;https://pan.baidu.com/s/1bJpfXudYEC7MJ7qfjDYPdg?pwdjipj 提取码&#xff1a;jipj 原装出厂Windows10系统自带所有驱动、出厂主题壁纸、系统属性专属LOGO标志、Office办公软件、联想电脑管家等预装程序 所需要工具&#xff1a;16G或以上的U盘 文件格式&a…...

编程日记 2024/1/6 22:49:36

54、Softmax 分类器以及它的底层原理

下面开始介绍最后一个算法softmax。在前面介绍全连接算法或其他文章中，或多或少也提到了softmax。 在分类网络里，softmax的作用主要是将模型的原始输出映射到 0~1之间的概率分布。很多时候对于我们初学者而言，只知道softmax可以做概率映射，但并不了解它内部的原理是如何完…...

编程日记 2024/1/6 22:47:35

【React】class组件生命周期函数的梳理和总结（第一篇）

1. 前言 本篇梳理和总结一下React的生命周期函数&#xff0c;方便使用class组件的同学查阅&#xff0c;先上生命周期图谱。 2. 生命周期函数 生命周期函数说明constructor(props) 功能&#xff1a;如果不需要初始化state或不进行方法绑定&#xff0c;class组件可以不用实现构造…...

编程日记 2024/1/6 22:46:34

[每周一更]-(第49期)：一名成熟Go开发需储备的知识点（答案篇）- 2

答案篇 1、Go语言基础知识 什么是Go语言&#xff1f;它有哪些特点&#xff1f; Go语言&#xff08;也称为Golang&#xff09;是一种由Google开发的开源编程语言。它于2007年首次公开发布&#xff0c;并在2012年正式推出了稳定版本。Go语言旨在提供简单、高效、可靠的编程解决…...

编程日记 2024/1/6 22:45:33

23种设计模式Python版

目录 创建型模式简单工厂模式工厂方法模式抽象工厂模式单例模式原型模式建造者模式 结构型模式适配器模式桥接模式组合模式装饰器模式外观模式享元模式代理模式 行为型模式职责链模式命令模式解释器模式迭代器模式中介者模式备忘录模式观察者模式状态模式策略模式模板方法模式访…...

编程日记 2024/1/6 22:44:31

2024年汉字小达人区级选拔备考——真题做一做：诗词连线

前面&#xff0c;六分成长介绍了汉字小达人区级选拔样题的第一大题看拼音写汉字&#xff0c;以及第二大题补充成语。这两道题都是填空题&#xff0c;通常在学校进行线下选拔的时候使用。这篇文章介绍第三大题&#xff1a;诗词连线。 诗词连线是2022年&#xff08;第九届&#x…...

编程日记 2024/1/6 22:40:27

Vite scss 如何引入本地 字体

Vite scss 如何引入本地 字体 最近在用 Vite 改造一个旧项目 Diary&#xff0c;遇到了好多从 Vue 转到 Vite 的问题。 这次这个问题是&#xff1a; scss 里本地字体引入的问题。 一、问题描述 可以看到下面的卡片字体&#xff0c;本来应该是 impact 的&#xff0c;但现在无法…...

编程日记 2024/1/6 22:39:26

扩展 apiserver 连接认证 ip, apiserver证书更新

本文来自我的博客地址 文章目录 问题场景:问题分析:问题解决:查看 apiserver 证书支持的 ip 或 host使用 openssl 生成证书:再次查看 apiserver 证书支持的 ip 或 host 再次尝试将 master 加点加入参考 问题场景: k8s 1.28.1 集群后期新增 vip apiserver 证书不支持 vip 引入…...

编程日记 2024/1/6 22:38:25

VUE--保留小数（过滤器）

1.cutOutNum.js export const cutOutNum (num, decimals) > {if (isNaN(num) || (!num && num ! 0)) {return "-";}function toNonExponential(_num) {var m Number(_num).toExponential().match(/\d(?:\.(\d*))?e([-]\d)/);return Number(_num).toF…...

编程日记 2024/1/6 22:37:24

书生·浦语大模型实战营第一次课堂笔记

书生浦语大模型全链路开源体系。大模型是发展通用人工智能的重要途径,是人工通用人工智能的一个重要途径。书生浦语大模型覆盖轻量级、重量级、重量级的三种不同大小模型,可用于智能客服、个人助手等领域。还介绍了书生浦语大模型的性能在多个数据集上全面超过了相似量级或相近…...

编程日记 2024/1/6 22:36:23

Mysql为什么只能支持2000w左右的数据量？

首先说明一下&#xff1a; MySQL并没有硬性规定只能支持到2000万左右的数据量。 其实&#xff0c;MySQL能够处理的数据量远远超过这个数字。无论是开源社区版还是商业版&#xff0c; MySQL在适当的硬件和配置下&#xff0c;都能够支持非常大的数据集。 通常所说的“MySQL只能…...

编程日记 2024/1/6 22:33:21

限制选中指定个数CheckBox控件（1/2）

限制选中指定个数CheckBox控件&#xff08;1/2&#xff09; 实例需求&#xff1a;工作表中有8个CheckBox控件&#xff08;下文中简称为控件&#xff09;&#xff0c;现在需要实现限制用户最多只能勾选4个控件。 Dim OnDic As Object Sub CheckboxeEvent()Dim oCB As CheckBox…...

编程日记 2024/1/6 22:30:18

QT中的信号与槽的讲解

文章目录 信号及其特点槽及其特点代码演示标准信号与标准槽函数方式一方式二 自定义信号和槽connect()函数信号和槽函数存在函数重载的情况下Qt的信号槽机制注意事项 信号及其特点 信号&#xff1a;是一种特殊的函数&#xff0c;又称信号函数&#xff0c;俗称信号&#xff0c;…...

编程日记 2024/1/6 22:29:17

RNN文本分类任务实战

递归神经网络 &#xff08;RNN&#xff09;&#xff1a; 定义&#xff1a;RNN 是一类专为顺序数据处理而设计的人工神经网络。 顺序处理&#xff1a;RNN 保持一个隐藏状态&#xff0c;该状态捕获有关序列中先前输入的信息&#xff0c;使其适用于涉及顺序依赖关系的任务。词嵌入…...

编程日记 2024/1/6 22:26:14

【算法系列 | 12】深入解析查找算法之—斐波那契查找

序言 心若有阳光&#xff0c;你便会看见这个世界有那么多美好值得期待和向往。 决定开一个算法专栏&#xff0c;希望能帮助大家很好的了解算法。主要深入解析每个算法&#xff0c;从概念到示例。 我们一起努力&#xff0c;成为更好的自己&#xff01; 今天第12讲&#xff0c;讲…...

编程日记 2024/1/6 22:25:14

全新的C++语言

一、概述 C 的最初目标就是成为 “更好的 C”&#xff0c;因此新的标准首先要对基本的底层编程进行强化&#xff0c;能够反映当前计算机软硬件系统的最新发展和变化&#xff08;例如多线程&#xff09;。另一方面&#xff0c;C对多线程范式的支持增加了语言的复杂度&#xff0…...

编程日记 2024/1/6 22:24:13

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

编程新知 2026/2/8 4:37:20

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2026/1/28 2:18:42

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2026/2/8 12:24:34

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/9/18 19:34:22

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

编程新知 2025/9/12 15:10:44

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/10/3 17:30:30

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2026/2/1 6:11:51

以光量子为例，详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

编程新知 2026/2/7 11:51:32

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

编程新知 2026/2/7 10:47:09

基于Java Swing的电子通讯录设计与实现：附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

编程新知 2025/10/4 20:58:43