10个对web开发人员有用的HTML文件上传技巧 _HTML

简介上传文件功能可以说是项目经常出现的需求。从在社交媒体上上传照片到在求职网站上发布简历，文件上传无处不在。在本文中，我们将讨论 html文件上传支持的10种用法，希望对你有用。
1. 单文件上传我们可以将input 类型指定为file ，以在Web应用程序中使用文件上传功能。
<input type="file" id="file-uploader">input filte 提供按钮上传一个或多个文件。默认情况下，它使用操作系统的本机文件浏览器上传单个文件。成功上传后， File API 使得可以使用简单的 JS 代码读取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
2. 多文件上传如果我们想上传多个文件，需要在标签上添加 multiple 属性：
<input type="file" id="file-uploader" multiple />现在，我们可以上传多个文件了，以前面事例为基础，选择多个文件上传后，观察一下控制台的变化：

文章插图

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/MWeamYp
3.了解文件元数据每当我们上传文件时， File对象都有元数据信息，例如file name ， size ， last update time ， type 等等。这些信息对于进一步的验证和特殊处理很有用。

const fileUploader = document.getElementById('file-uploader');// 听更 change 件并读取元数据fileUploader.addEventListener('change', (event) => {  // 获取文件列表数组  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 玩玩，地址：https://codepen.io/atapas/pen/gOMaRJv
4.了解 accept 属性我们可以使用accept属性来限制要上载的文件的类型，如果只想上传的文件格式是 .jpg ， .png 时，可以这么做：
<input type="file" id="file-uploader" accept=".jpg, .png" multiple>在上面的代码中，只能选择后缀是.jpg和.png的文件。
如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/OJXymRP
5. 管理文件内容成功上传文件后显示文件内容，站在用户的角度上，如果上传之后，没有一个预览的，就很奇怪也不体贴。
我们可以使用FileReader对象将文件转换为二进制字符串。然后添加load 事件侦听器，以在成功上传文件时获取二进制字符串。