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

单文件上传

news 2026/2/10 10:58:54

随着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

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/8/23 5:46:26

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

编程新知 2025/10/14 10:52:24

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

编程新知 2026/1/31 4:37:39

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

编程新知 2026/2/1 3:12:03

【论文阅读28】-CNN-BiLSTM-Attention-（2024）

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

编程新知 2026/2/2 3:06:53

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

编程新知 2026/1/31 7:39:20

API网关Kong的鉴权与限流：高并发场景下的核心实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中&#xff0c;API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关&#xff0c;Kong凭借其插件化架构…...

编程新知 2025/9/6 9:35:29

​​企业大模型服务合规指南：深度解析备案与登记制度​​

伴随AI技术的爆炸式发展&#xff0c;尤其是大模型&#xff08;LLM&#xff09;在各行各业的深度应用和整合&#xff0c;企业利用AI技术提升效率、创新服务的步伐不断加快。无论是像DeepSeek这样的前沿技术提供者&#xff0c;还是积极拥抱AI转型的传统企业&#xff0c;在面向公众…...

编程新知 2026/2/9 1:32:22

ArcPy扩展模块的使用(3)

管理工程项目 arcpy.mp模块允许用户管理布局、地图、报表、文件夹连接、视图等工程项目。例如&#xff0c;可以更新、修复或替换图层数据源&#xff0c;修改图层的符号系统&#xff0c;甚至自动在线执行共享要托管在组织中的工程项。 以下代码展示了如何更新图层的数据源&…...

编程新知 2025/10/2 7:24:40

轻量级Docker管理工具Docker Switchboard

简介 什么是 Docker Switchboard &#xff1f; Docker Switchboard 是一个轻量级的 Web 应用程序&#xff0c;用于管理 Docker 容器。它提供了一个干净、用户友好的界面来启动、停止和监控主机上运行的容器&#xff0c;使其成为本地开发、家庭实验室或小型服务器设置的理想选择…...

编程新知 2026/2/10 3:26:53