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

单文件上传

news 文章来源：https://blog.csdn.net/zkq5168/article/details/135432214 2024/10/28 13:27:53

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

three.js 多通道组合

效果&#xff1a; 代码&#xff1a; <template><div><el-container><el-main><div class"box-card-left"><div id"threejs" style"border: 1px solid red"></div><div style"border: 1px so…...

编程日记 2024/1/6 22:20:10

编程笔记 html5cssjs 022 HTML表单概要

编程笔记 html5&css&js 022 HTML表单概要 一、<form> 元素二、HTML Form 属性三、操作小结 网页光是输出没有输入可不行&#xff0c;因为输出还是比输入容易&#xff0c;所有就先接触输出&#xff0c;后学习输入。html用来输入的东西叫“表单”。 HTML 表单用于搜…...

编程日记 2024/1/6 22:19:08

​三子棋（c语言）

前言&#xff1a; 三子棋是一种民间传统游戏&#xff0c;又叫九宫棋、圈圈叉叉棋、一条龙、井字棋等。游戏规则是双方对战&#xff0c;双方依次在9宫格棋盘上摆放棋子&#xff0c;率先将自己的三个棋子走成一条线就视为胜利。但因棋盘太小&#xff0c;三子棋在很多时候会出现和…...

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

MySQL-DCL

DCL是数据控制语言&#xff0c;用来管理数据库用户&#xff0c;控制数据库的访问权限。 管理用户&#xff1a;管理哪些用户可以访问哪些数据库 1.查询用户 USE mysql; SELECT * FROM user; 注意&#xff1a; MySQL中用户信息和用户的权限信息都是记录在mysql数据库的user表中的…...

编程日记 2024/1/6 22:16:06

QT开源类库集合

QT开源类库集合 一、自定义控件 QSintQicsTableLongscroll-qtAdvanced Docking System 二、图表控件 QwtQCustomPlotJKQTPlotter 三、网络 QHttpEngineHTTP 四、 音视频 vlc-qt 五、多线程 tasks 六、数据库 EasyQtSql 一、自定义控件 1. QSint 源代码地址&#xff1a;QSint&…...

编程日记 2024/1/6 22:15:05

C++ STL（2）--算法(2)

算法(2)----STL里的排序函数。 1. sort: 对容器或普通数组中指定范围内的元素进行排序&#xff0c;默认进行升序排序。 sort函数是基于快速排序实现的&#xff0c;属于不稳定排序。 只支持3种容器&#xff1a;array、vector、deque。 如果容器中存储的是自定义的对象&#xff…...

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

格密码基础：对偶格（超全面）

目录 一. 对偶格的格点 1.1 基本定义 1.2 对偶格的例子 1.3 对偶格的图形理解 二. 对偶格的格基 2.1 基本定义 2.2 对偶格的格基证明 三. 对偶格的行列式 3.1 满秩格 3.2 非满秩格 四. 重复对偶格 五. 对偶格的转移定理&#xff08;transference theorem&#xff…...

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

ECMAScript简介及特性

ECMAScript是一种由ECMA国际&#xff08;前身为欧洲计算机制造商协会&#xff09;制定和发布的脚本语言规范&#xff0c;JavaScript在它基础上进行了自己的封装。ECMAScript和JavaScript的关系是&#xff0c;前者是后者的规格&#xff0c;后者是前者的一种实现。 ECMAScript的…...

编程日记 2024/1/6 22:10:00

csdn中的资源文件如何删除？

csdn中的资源文件如何删除&#xff1f; 然后写文章的时候 点击资源绑定&#xff0c;解锁资源&#xff0c;就可以再次上传。...

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

NA原理及配置

在IP地址空间中&#xff0c;a&#xff1b;b&#xff1b;c类地址中各有一部分地址&#xff0c;被称为私有IP地址&#xff08;私网地址&#xff09;&#xff0c;其余的为公有IP地址&#xff08;公网地址&#xff09; A&#xff1a;10.0.0.0 - 10.255.255.255 --- 相当于1条A类网段…...

编程日记 2024/1/6 22:06:58

06年可以做相册视频的网站/目前网络推广平台

前言 本篇文章将会持续更新&#xff0c;我会将我遇见的一些问题&#xff0c;和我看到的实用的CSS技巧记录下来&#xff0c;本篇文章会以图文混排的方式写下去。具体什么时候写完我也不清楚&#xff0c;反正我的目标是写100个。 本案例都是经本人实测&#xff0c;并附加全部案例…...

编程日记 2024/10/28 12:55:02

一个专门做标题的网站/推广业务

我目前正在浏览URL并在访问/抓取网站时抓取数据 .有时一个网站将有一个不合理的长加载时间&#xff0c;没有错误&#xff0c;但不会完全加载&#xff0c;以允许chromedriver / urlopen完成/继续脚本&#xff0c;只是保持不稳定 .动态测试元素的存在在这种情况下不起作用&#x…...

编程日记 2024/10/28 10:54:03

山东网站建设优化技术/无锡seo培训

今天同事给了两个SQL&#xff0c;超级大&#xff0c;一个表8000多万&#xff0c;一个表7800万&#xff0c;原语句如下&#xff1a;[more]update CHANNEL_CHENGDU.o_user_CONS partition(p201011) ASET unuser_flag (SELECT unuser_flagFROM CHANNEL_CHENGDU.o_user partition(…...

编程日记 2024/10/28 9:34:54

无棣网页设计/郭生b如何优化网站

1.数组 public class Test{public static void main(String args[]){int[] intArray new int[] {1,4,3,2,5};//等价于 : int intArray[] new int[] {1,2,3,4,5};System.out.println(intArray.length); //打印长度//使用java.util.Arrays工具类 来操作 数组System.out.pr…...

编程日记 2024/10/28 8:23:01

顺德高端网站建设/公司培训

宽为限 紧用功 功夫到 滞塞通 容器生态现状 容器生态&#xff0c;对比2015年之前已经有重大变化&#xff0c;2015-2016年间&#xff0c;互联网、新兴企业都在将其Workload向容器环境迁。容器已不仅仅是两年前的部署工具&#xff0c;更是一种成熟的技术和平台&#xff0c;已经…...

编程日记 2024/10/28 5:42:16

旅游网站源码/网站建设与管理是干什么的

java.sql.SQLException: Field ‘id’ doesn’t have a default value 解决办法 打开Navicat for mysql&#xff0c;将该表的主键id设置为自增即可&#xff0c;勾选后保存...

编程日记 2024/10/28 4:43:32