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

单文件上传

news 2026/5/16 9:56:22

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

基于Java开发无人机飞手接单平台低空经济服务系统源码搭建

在低空经济快速崛起的当下&#xff0c;无人机已广泛应用于航拍、测绘、电力巡检、农业植保等多个领域&#xff0c;专业飞手资源与市场需求之间的对接难题日益凸显——需求方难以快速找到符合资质的飞手&#xff0c;具备合法资质的飞手也面临接单渠道分散、任务匹配低效的问题。…...

编程新知 2026/5/16 8:36:18

Redis怎样配置不同环境下的内存淘汰机制

...

编程新知 2026/5/16 8:21:17

基于规则引擎的自动化文件管理工具smartcat实战指南

1. 项目概述&#xff1a;一个智能化的文件分类与归档工具最近在整理个人电脑和服务器上的文件时&#xff0c;我又一次陷入了混乱。下载文件夹里塞满了各种格式的文档、图片、压缩包&#xff0c;项目目录下混杂着不同版本的代码、设计稿和会议记录。手动分类不仅耗时&#xff0c…...

编程新知 2026/5/16 8:10:27

为Adafruit CLUE开发板设计超薄可拆卸3D打印外壳：从建模到装配全指南

1. 项目概述&#xff1a;为你的CLUE开发板“量体裁衣”如果你手头有一块Adafruit CLUE开发板&#xff0c;大概率会和我有同样的感受&#xff1a;这块板子功能强大&#xff0c;集成了屏幕、按钮、一堆传感器&#xff0c;但裸露的电路板和元器件总让人有点“心疼”&#xff0c;怕…...

编程新知 2026/5/16 7:42:40

实在Agent如何破解成本分析报告编制耗时耗力与数据滞后？企业架构师的避坑指南

摘要&#xff1a;在2026年的今天&#xff0c;尽管AI技术已深度普及&#xff0c;但许多企业的财务与运营部门仍深陷“数据泥潭”。传统的成本分析报告编制依赖于大量的人工导数、Excel汇总及跨系统搬运&#xff0c;导致报告产出即滞后&#xff0c;严重误导决策。作为一名深耕行业…...

编程新知 2026/5/16 5:44:30

基于CircuitPython与伺服电机的自动调光眼镜制作指南

1. 项目概述与核心思路 最近在整理工作室的零件盒&#xff0c;翻出来一块Adafruit的Circuit Playground Express开发板和几个闲置的微伺服电机。看着窗外刺眼的阳光&#xff0c;我忽然想到&#xff0c;能不能用这些手头的“边角料”做个实用的小玩意儿&#xff1f;于是&#x…...

编程新知 2026/5/16 5:33:59

从零搭建静态博客：Hugo + GitHub Pages 全流程实战指南

1. 项目概述&#xff1a;一个静态博客的诞生与进化 如果你在GitHub上搜索过个人博客的源码&#xff0c;大概率会见过类似 username/username.github.io 这样的仓库名。 Yucco-K/yucco-k.github.io 就是这样一个典型的、以GitHub Pages为宿主的个人静态博客项目。乍一看&am…...

编程新知 2026/5/16 4:15:09

IoTDB与TimechoDB深度解析

全球物联网设备将在2025年突破416亿台&#xff0c;每天产生79.4ZB的数据&#xff0c;相当于8000多万个1TB硬盘才能装下。面对这场数据海啸&#xff0c;传统数据库纷纷“侧漏”&#xff0c;时序数据库成为企业数字化升级的“救生艇”。 本文将从五大核心维度&#xff0c;系统剖…...

编程新知 2026/5/16 4:04:32

RAG系统评估实战：使用renumics-rag进行量化分析与性能优化

1. 项目概述&#xff1a;一个为RAG应用量身定制的开源评估工具如果你正在构建或优化一个基于检索增强生成&#xff08;RAG&#xff09;的系统&#xff0c;那么你大概率会遇到一个核心痛点&#xff1a;如何科学、量化地评估它的好坏&#xff1f;是看它回答得“像不像人”&#x…...

编程新知 2026/5/16 2:31:13

Adobe MAX 2024未公开彩蛋：Sora 2本地推理模块如何通过Premiere Ultra引擎实现离线实时预览（含CUDA核心绑定指南）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Adobe MAX 2024未公开彩蛋的发现与验证 在 Adobe MAX 2024 主会场演示视频的第 47 分 23 秒处&#xff0c;开发者无意间触发了隐藏的调试面板——该面板仅在启用特定环境变量且运行于 macOS Sonoma Ap…...

编程新知 2026/5/16 1:48:32