10个有用的HTML文件上传技巧
上传文件的能力是许多Web和移动应用的关键需求,从将照片上传到社交媒体上到将简历发布到工作门户网站上,文件上传无处不在。
作为一名Web开发人员,我们一定知道HTML提供了原生文件上传的支持,并借助于JavaScript的一点帮助。在HTML5中,File API被添加到DOM中。利用它,我们可以读取 FileList
和其中的 File
对象,这就解决了文件的多种用例,即在本地加载文件或通过网络发送到服务器进行处理等。
在本文中,我们将讨论HTML文件上传支持的10种用法,希望你觉得它有用。
在任何时候,如果您想使用这些文件上传功能,都可以在这里找到:
HTML文件上传演示:https://html-file-upload.netlify.app/
该演示的源代码在我的Github存储库中,✋请随时关注我,并通过示例不断更新代码,如果您觉得有用,请给一个⭐。
源代码仓库:https://github.com/atapas/html-file-upload
1.单个文件上传
我们可以将输入类型指定为 file
,以在Web应用程序中使用文件上传器功能。
<input type="file" id="file-uploader">
输入文件类型使用户可以通过按钮上传一个或多个文件,默认情况下,它允许使用操作系统的本地文件浏览器上传单个文件。
上传成功后,File API
可以使用简单的JavaScript代码读取 File
对象。要读取 File
对象,我们需要监听文件上传器的 change
事件。
首先,通过ID获取文件上传器实例
const fileUploader = document.getElementById('file-uploader');
然后添加一个 change
事件侦听器,以在上传完成后读取文件对象,我们从 event.target.files
属性获取上传的文件信息。
fileUploader.addEventListener('change', (event) => {const files = event.target.files;console.log('files', files);
});
在浏览器控制台中观察输出,注意 FileList
数组中的 File
对象拥有上传文件的所有元数据信息。
下面是相同示例的代码页,供您进一步研究
CodePen:https://codepen.io/atapas/pen/rNLOyRm
<div><h1>单个文件上传</h1><input type="file" id="file-uploader"><p>上传文件,并在浏览器控制台中查看输出。</p><p id="feedback"></p>
</div>
const fileUploader = document.getElementById('file-uploader');fileUploader.addEventListener('change', (event) => {const files = event.target.files;console.log('files', files);const feedback = document.getElementById('feedback');const msg = `File ${files[0].name} uploaded successfully!`;feedback.innerHTML = msg;
});
2.多文件上传
我们可以一次上传多个文件。为此,我们只需要在输入文件标签中添加一个名为 multiple
的属性即可。
<input type="file" id="file-uploader" multiple />
现在,文件浏览器将允许您上传一个或多个要上传的文件。就像前面的例子一样,你可以添加一个 change
事件处理程序来捕获上传文件的信息。您是否注意到 FileList
是一个数组?对,对于多个文件上传,数组将具有以下信息:
下面是CodePen链接,用于探索多个文件上传。
CodePen:https://codepen.io/atapas/pen/MWeamYp
<div><h1>多文件上传</h1><input type="file" id="file-uploader" multiple><p>上传多个文件并在浏览器控制台中查看输出</p><p id="feedback"></p>
</div>
const fileUploader = document.getElementById('file-uploader');fileUploader.addEventListener('change', (event) => {const files = event.target.files;console.log('files', files);// show the upload feedbackconst feedback = document.getElementById('feedback');const msg = `${files.length} file(s) uploaded successfully!`;feedback.innerHTML = msg;
});
3.了解文件元数据
每当我们上传一个文件时,File
对象都有元数据信息,如文件名、大小、最后更新时间、类型等,此信息对于进一步的验证和决策很有用。
// 通过id获取文件上传者
const fileUploader = document.getElementById('file-uploader');// 监听 change 事件并读取元数据
fileUploader.addEventListener('change', (event) => {// 获取FileList数组const files = event.target.files;// 循环浏览文件并获取元数据for (const file of files) {const name = file.name;const type = file.type ? file.type: 'NA';const size = file.size;const lastModified = file.lastModified;console.log({ file, name, type, size, lastModified });}
});
这是单个文件上传的输出:
使用此CodePen进行进一步探索
CodePen:https://codepen.io/atapas/pen/gOMaRJv
<div><h1>Read File Metadata</h1><input type="file" id="file-uploader"><p id="feedback"></p>
</div>
const fileUploader = document.getElementById('file-uploader');fileUploader.addEventListener('change', (event) => {const files = event.target.files;console.log('files', files);for (const file of files) {const name = file.name;const type = file.type ? file.type : 'NA';const size = file.size;const lastModified = file.lastModified;console.log({file, name, type, size, lastModified});const feedback = document.getElementById('feedback');const msg = ` File Name: ${name} <br/>File Size: ${size} <br/>File type: ${type} <br/>File Last Modified: ${new Date(lastModified)}`;feedback.innerHTML = msg;}
});
4.了解文件 accept属性
我们可以使用 accept
属性来限制要上传的文件的类型,您可能希望在用户上传个人资料图片时,只显示允许浏览png格式图片类型。
<input type="file" id="file-uploader" accept=".jpg, .png" multiple>
在上面的代码中,文件浏览器将只允许扩展名为 jpg
和 png
的文件。
请注意,在这种情况下,文件浏览器会自动将文件选择类型设置为自定义而不是全部。但是,如果需要,您始终可以将其更改回所有文件。
使用此CodePen探索 accept
属性
CodePen:https://codepen.io/atapas/pen/OJXymRP
<div><h1>只能选择.png和.jpg文件</h1><input type="file" id="file-uploader" accept=".jpg, .png" multiple><p>Upload files and see the output in browser console</p>
</div>
const fileUploader = document.getElementById('file-uploader');fileUploader.addEventListener('change', (event) => {const files = event.target.files;console.log('files', files);
});
5.管理文件内容
您可以在成功上传文件后显示文件内容。对于个人资料图片,如果上传后不立即向用户展示上传的图片,会造成混乱。
我们可以使用 FileReader
对象将文件转换为二进制字符串。然后添加 load
事件侦听器,以在成功上传文件时获取二进制字符串。
// 获取FileReader的实例
const reader = new FileReader();fileUploader.addEventListener('change', (event) => {const files = event.target.files;const file = files[0];// 上传后获取文件对象并读取// 数据作为URL二进制字符串reader.readAsDataURL(file);// 加载后,对字符串进行处理reader.addEventListener('load', (event) => {// 在这里我们创建一个图像标签并添加图片const img = document.createElement('img');imageGrid.appendChild(img);img.src = event.target.result;img.alt = file.name;});
});
尝试在下面的CodePen中选择一个图像文件,然后查看其渲染。
CodePen:https://codepen.io/atapas/pen/zYBvdjZ
<div><h1>显示文件内容</h1><input type="file" id="file-uploader" accept=".jpg, .jpeg, .png" ><div id="image-grid"></div>
</div>
const fileUploader = document.getElementById('file-uploader');
const reader = new FileReader();
const imageGrid = document.getElementById('image-grid');fileUploader.addEventListener('change', (event) => {const files = event.target.files;const file = files[0];reader.readAsDataURL(file);reader.addEventListener('load', (event) => {const img = document.createElement('img');imageGrid.appendChild(img);img.src = event.target.result;img.alt = file.name;});
});
6.验证文件大小
如我们所见,我们可以读取文件的大小元数据,实际上可以将其用于文件大小验证,您可能允许用户上传最大1MB的图像文件。让我们看看如何实现这一目标。
// 文件上传change事件的侦听器
fileUploader.addEventListener('change', (event) => {// 读取文件大小const file = event.target.files[0];const size = file.size;let msg = '';// 检查文件大小是否大于1MB,并准备一条消息。if (size > 1024 * 1024) {msg = `<span style="color:red;">The allowed file size is 1MB. The file you are trying to upload is of ${returnFileSize(size)}</span>`;} else {msg = `<span style="color:green;"> A ${returnFileSize(size)} file has been uploaded successfully. </span>`;}// 向用户显示消息feedback.innerHTML = msg;
});
尝试上传不同大小的文件,以查看验证的工作原理
CodePen:https://codepen.io/atapas/pen/pobjMKv
<div><h1>检查文件大小</h1><input type="file" id="file-uploader"><div id="feedback"></div
</div>
const fileUploader = document.getElementById('file-uploader');
const feedback = document.getElementById('feedback');fileUploader.addEventListener('change', (event) => {const file = event.target.files[0];console.log('file', file);const size = file.size;console.log('size', size);let msg = '';if (size > 1024 * 1024) {msg = `<span style="color:red;">The allowed file size is 1MB. The file you are trying to upload is of ${returnFileSize(size)}</span>`;} else {msg = `<span style="color:green;"> A ${returnFileSize(size)} file has been uploaded successfully. </span>`;}feedback.innerHTML = msg;
});function returnFileSize(number) {if(number < 1024) {return number + 'bytes';} else if(number >= 1024 && number < 1048576) {return (number/1024).toFixed(2) + 'KB';} else if(number >= 1048576) {return (number/1048576).toFixed(2) + 'MB';}
}
7.显示文件上传进度
更好的可用性是让你的用户知道文件上传的进程。现在,我们知道了 FileReader
和读取和加载文件的事件。
const reader = new FileReader();
FileReader
有另一个事件,称为进度(progress
),知道已加载了多少。我们可以使用HTML5的 progress
标签来创建带有此信息的进度栏。
reader.addEventListener('progress', (event) => {if (event.loaded && event.total) {// 计算完成百分比const percent = (event.loaded / event.total) * 100;// 将值设置为进度组件progress.value = percent;}
});
不如你试着上传一个大一点的文件,看看下面的CodePen中的进度条工作情况如何?试试吧。
CodePen:https://codepen.io/atapas/pen/eYzpwYj
<div><h1>File upload progress</h1><input type="file" id="file-uploader"><div id="feedback"></div><label id="progress-label" for="progress"></label><progress id="progress" value="0" max="100"> </progress>
</div>
const fileUploader = document.getElementById('file-uploader');
const feedback = document.getElementById('feedback');
const progress = document.getElementById('progress');const reader = new FileReader();fileUploader.addEventListener('change', (event) => {const files = event.target.files;const file = files[0];reader.readAsDataURL(file);reader.addEventListener('progress', (event) => {if (event.loaded && event.total) {const percent = (event.loaded / event.total) * 100;progress.value = percent;document.getElementById('progress-label').innerHTML = Math.round(percent) + '%';if (percent === 100) {let msg = `<span style="color:green;">File <u><b>${file.name}</b></u> has been uploaded successfully.</span>`;feedback.innerHTML = msg;}}});
});
8.目录上传呢?
我们可以上传整个目录吗?好吧,这是可能的,但有一些限制。有一个叫做 webkitdirectory
的非标准属性(至少在写这篇文章的时候是这样),允许我们上传整个目录。
虽然最初只针对基于WebKit的浏览器实现,但webkitdirectory也可以在Microsoft Edge以及Firefox 50和更高版本中使用。但是,即使它具有相对广泛的支持,它仍然不是标准的,除非您别无选择,否则不应该使用它。
您可以将此属性指定为
<input type="file" id="file-uploader" webkitdirectory />
这将允许您选择一个文件夹(又名目录)
用户必须提供确认信息才能上传目录,
用户单击“Upload”按钮后,就会进行上传。这里要注意的重要一点:FileList
数组将以平面结构的形式包含有关上载目录中所有文件的信息。但关键是,对于每个 File
对象,webkitRelativePath
属性都会有目录路径。
例如,让我们考虑一个 main
目录及其下的其他文件夹和文件,
现在,File
对象将将 webkitRelativePath
填充为
您可以使用它在您选择的任何UI结构中呈现文件夹和文件。使用此CodePen进行进一步探索。
CodePen:https://codepen.io/atapas/pen/dyXYRKp
<div><h1>Upload directories</h1><input type="file" id="file-uploader" webkitdirectory /><ul id="pathList"></ul>
</div>
const fileUploader = document.getElementById('file-uploader');
const pathList = document.getElementById('pathList');function removeAllChildNodes(parent) {while (parent.firstChild) {parent.removeChild(parent.firstChild);}
}fileUploader.addEventListener('change', (event) => {const files = event.target.files;console.log('files', files);removeAllChildNodes(pathList);[...files].forEach((file, index) => {let path = document.createElement('li');path.innerHTML = file.webkitRelativePath;pathList.appendChild(path);});
});
9.让我们拖放,上传
不支持拖放功能进行文件上传是一种古老的方式,不是吗?让我们看看如何通过几个简单的步骤来实现这一目标。
首先,创建一个放置区和一个可选的区域以显示上传的文件内容。我们将使用图像作为文件拖放到此处。
<div id="container"><h1>Drag & Drop an Image</h1><div id="drop-zone">DROP HERE</div><div id="content">Your image to appear here..</div>
</div>
通过它们各自的ID获取拖拽和内容区域。
const dropZone = document.getElementById('drop-zone');
const content = document.getElementById('content');
添加一个 dragover
事件处理程序,以显示将要复制的内容的效果,
dropZone.addEventListener('dragover', event => {event.stopPropagation();event.preventDefault();event.dataTransfer.dropEffect = 'copy';
});
接下来,定义放置图像时我们要做什么,我们将需要一个 drop
事件监听器来处理。
dropZone.addEventListener('drop', event => {// 获取文件const files = event.dataTransfer.files;// 现在,我们可以尽一切可能来展示文件内容在一个HTML元素中,如,DIV。
});
尝试在下面的CodePen示例中拖放图像文件,并查看其工作原理,不要忘记查看代码以渲染拖放的图像。
CodePen:https://codepen.io/atapas/pen/ExyVoXN
<div id="container"><h1>Drag & Drop an Image</h1><div id="drop-zone"> DROP HERE </div><div id="content">Your image to appear here.. </div>
</div>
const dropZone = document.getElementById('drop-zone');
const content = document.getElementById('content');const reader = new FileReader();if (window.FileList && window.File) {dropZone.addEventListener('dragover', event => {event.stopPropagation();event.preventDefault();event.dataTransfer.dropEffect = 'copy';});dropZone.addEventListener('drop', event => {content.innerHTML = '';event.stopPropagation();event.preventDefault();const files = event.dataTransfer.files;console.log(files);reader.readAsDataURL(files[0]);reader.addEventListener('load', (event) => {content.innerHTML = '';const img = document.createElement('img');img.style.height = '400px';img.style.width = '400px';content.appendChild(img);img.src = event.target.result;img.alt = file.name;});});
}
10.使用objectURLs处理文件
有一个称为 URL.createObjectURL()
的特殊方法,可以从文件创建唯一的URL,您也可以使用 URL.revokeObjectURL()
方法释放它。
DOM
URL.createObjectURL()
和URL.revokeObjectURL()
方法让你可以创建简单的URL字符串,这些字符串可以用来引用任何可以使用DOM文件对象引用的数据,包括用户计算机上的本地文件。
对象URL的简单用法是:
img.src = URL.createObjectURL(file);
使用此CodePen可以进一步浏览对象URL。提示:将此方法与前面#5中提到的方法进行比较。
<div><h1>Use Object URL</h1><input type="file" id="file-uploader" accept=".jpg, .jpeg, .png" ><div id="image-grid"></div>
</div>
const fileUploader = document.getElementById('file-uploader');
const reader = new FileReader();
const imageGrid = document.getElementById('image-grid');fileUploader.addEventListener('change', (event) => {const files = event.target.files;const file = files[0];const img = document.createElement('img');imageGrid.appendChild(img);img.src = URL.createObjectURL(file);img.alt = file.name;
});
结束
很多时候,原生HTML功能足以让我们处理手中的用例。我发现,文件上传默认情况下提供了许多不错的选择。
原文:https://dev.to/atapas
微信搜索【前端全栈开发者】关注这个脱发、摆摊、卖货、持续学习的程序员,第一时间阅读最新文章,会优先两天发表新文章。关注即可大礼包,准能为你节省不少钱!
10个有用的HTML文件上传技巧相关推荐
- 简单的html网页图片上传,10个有用的HTML文件上传技巧
上传文件的能力是许多Web和移动应用的关键需求,从将照片上传到社交媒体上到将简历发布到工作门户网站上,文件上传无处不在. 作为一名Web开发人员,我们一定知道HTML提供了原生文件上传的支持,并借助于 ...
- 10个对web开发人员有用的HTML文件上传技巧
作者: Tapas Adhikary 译者:前端小智 来源:dev 最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了. github 地 ...
- 上传文件转换html异常,JS 文件互转、10 个 HTML 文件上传技巧、Web 用户体验设计提升指南、奇怪的知识——位掩码 | 思否技术周刊...
上传文件功能可以说是项目经常出现的需求.从在社交媒体上上传照片到在求职网站上发布简历,文件上传无处不在.在本文中,我们将讨论 HTML文件上传支持的10种用法,希望对你有用. 1. 单文件上传 我们可 ...
- 10.基于Tomcat的SmartUplaod文件上传
文件的上传是项目中常见的核心功能,比如在注册的时候可能在表单中要求用户提交照片等.此时就需要使用到文件的上传,本次课题以上传雇员的照片作为需求,但是在很多时候上传的的需求不仅仅是雇员,可能需要上传管理 ...
- input上传文件夹第二次时删除第一次_Web端非常有用的一个文件上传插件——FilePond...
介绍 FilePond是一个JavaScript库,它提供流畅的拖放文件上传功能.可以上传任何你扔在它上面的东西,优化图像以便更快地上传,并提供一个非常优雅的.可靠的.平滑的用户体验. Github ...
- 【渗透测试】一次运气很好的文件上传
文件上传 发现源代码泄露 打开自己珍藏已久的辣鸡字典,扫描发现存在bin.zip信息泄露,尝试进行代码审计 文件位置:SimpleDataPlatform.SimpleDataPlatform.fil ...
- 酷盘 文件服务器,文件上传云端 - 卡饭网
怎么通过手机版TIM端把文件上传到云端 怎么通过手机版TIM端把文件上传到云端 手机版Tim是我们常用的一款社交软件,给我们的生活带来了极大的便利和乐趣,深受用户欢迎,有的朋友想知道怎么通过手机版TI ...
- node使用express+multer文件上传和下载的问题
简单使用multer实现文件的上传和下载: 1.文件上传使用multer,首先要在项目中安装multer模块. npm install multer -save 2.这里使用express模块,mul ...
- 本地文章上传阿里云文件上传
文章目录 一. 本地文件上传的步骤 1.1 实现文件上传的service 1.2 实现文件上传controller 1.3 在application.yml配置即可 1.4 配置静态资源服务目录映射 ...
最新文章
- IntelliJ IDEA 连接数据库 详细过程
- js设计一个带开关的时钟_数电题:三个按键一个灯
- java加载类时静态代码块、构造代码块、构造方法执行顺序
- VMware安装Linux(CentOS7)
- HTML与CSS布局技巧总结,Html和CSS布局技巧总结(偶尔回顾回顾布局也是很有必要的)...
- 程序员版《On Call 24 小时》
- ASP.NET 5 WebApi 返回 HttpResponseMessage
- linux返回上一行命令行,linux命令行编辑快捷键
- 实现一个javascript手势库 -- base-gesture.js
- Mac 隔空投送 AirDrop 搜不到 iPhone
- 1.学生党如何查找文献书籍
- Hacking Tools简介
- python老师培训课
- 1602LCD主要技术参数
- android毕设论文谢辞,毕业论文谢辞
- 有源代码就可以自行开发通达信交易接口了吗?
- 浅谈微博App在网站推广中的应用
- 视频维权新方式 视频内容将靠“DNA”鉴真假
- 中暑了,别只知道喝藿香正气水、擦清凉油!这个防暑妙招你得懂
- sharding-jdbc Data sources cannot be empty.