关于前端:10个HTML文件上传技巧

作者：Tapas Adhikary
译者：前端小智
起源：dev

有幻想，有干货，微信搜寻【大迁世界】关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

简介

上传文件性能能够说是我的项目经常出现的需要。从在社交媒体上上传照片到在求职网站上公布简历，文件上传无处不在。在本文中，咱们将探讨 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…

2. 多文件上传

如果咱们想上传多个文件，须要在标签上增加 multiple 属性：

<input type="file" id="file-uploader" multiple />

当初，咱们能够上传多个文件了，以后面事例为根底，抉择多个文件上传后，察看一下控制台的变动：

如果大家看到这里，有点冲动，想手贱一下，能够 CodePen 玩玩，地址：https://codepen.io/atapas/pen…

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…

4. 理解 accept 属性

咱们能够应用 accept 属性来限度要上载的文件的类型，如果只想上传的文件格式是 .jpg，.png 时，能够这么做：

<input type="file" id="file-uploader" accept=".jpg, .png" multiple>

在下面的代码中，只能抉择后缀是 .jpg 和.png的文件。

如果大家看到这里，有点冲动，想手贱一下，能够 CodePen 玩玩，地址：https://codepen.io/atapas/pen…

5. 管理文件内容

胜利上传文件后显示文件内容，站在用户的角度上，如果上传之后，没有一个预览的，就很奇怪也不体贴。

咱们能够应用 FileReader 对象将文件转换为二进制字符串。而后增加load 事件侦听器，以在胜利上传文件时获取二进制字符串。

// FileReader 实例
const reader = new FileReader();

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;
  });
});

如果大家看到这里，有点冲动，想手贱一下，能够 CodePen 玩玩，地址：https://codepen.io/atapas/pen…

6. 验证文件大小

如果用户上传图片过大，为了不让服务器有压力，咱们须要限度图片的大小，上面是容许用户上传小于 1M 的图片，如果大于 1M 将上传失败。

fileUploader.addEventListener('change', (event) => {
  // Read the file size
  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…

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` 标签
    progress.value = percent;
  }
});

如果大家看到这里，有点冲动，想手贱一下，能够 CodePen 玩玩，地址：https://codepen.io/atapas/pen…

8. 怎么上传目录上传?

咱们能够上传整个目录吗? 嗯，这是可能的，但有一些限度。有一个叫做 webkitdirectory 的非标准属性(目前只有谷歌浏览器还有 Microsoft Edge 反对依照文件夹进行上传)，它容许咱们上传整个目录。

目前只有谷歌浏览器还有 Microsoft Edge 反对依照文件夹进行上传，具体能够看下百度云盘的网页版的上传按钮，在火狐下就反对依照文件进行上传，而在谷歌和 Edge 下，就会给用户提供一个下拉，让用户抉择是依据文件进行上传还是依据文件夹进行上传。

<input type="file" id="file-uploader" webkitdirectory />

用户必须须要确认能力上传目录

用户单击“上传”按钮后，就会进行上传。这里要留神的重要一点。FileList数组将以立体构造的模式蕴含无关上载目录中所有文件的信息。对于每个 File 对象，webkitRelativePath属性示意目录门路。

例如，上传一个主目录及其下的其余文件夹和文件：

当初，File 对象将将 webkitRelativePath 填充为：

如果大家看到这里，有点冲动，想手贱一下，能够 CodePen 玩玩，地址：https://codepen.io/atapas/pen…

9. 拖拽上传

不反对文件上传的拖拽就有点 low 了，不是吗? 咱们来看看如何通过几个简略的步骤实现这一点。

首先，创立一个拖放区域和一个可选的区域来显示上传的文件内容。

<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 获取 dropzone 和content 区域。

 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 => {
  // Get the files
  const files = event.dataTransfer.files;


});

如果大家看到这里，有点冲动，想手贱一下，能够 CodePen 玩玩，地址：https://codepen.io/atapas/pen…

10. 应用 objectURL 解决文件

有一个非凡的办法叫做 URL.createobjecturl()，用于从文件中创立惟一的 URL。还能够应用URL.revokeObjectURL() 办法来开释它。

URL.revokeObjectURL() 静态方法用来开释一个之前曾经存在的、通过调用 URL.createObjectURL() 创立的 URL 对象。当你完结应用某个 URL 对象之后，应该通过调用这个办法来让浏览器晓得不必在内存中持续保留对这个文件的援用了。

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;
});

如果大家看到这里，有点冲动，想手贱一下，能够 CodePen 玩玩，地址：https://codepen.io/atapas/pen…

总结

无论何时，如果你还想学习本文波及的一些常识，你能够在这里尝试。

https://html-file-upload.netl…

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://dev.to/atapas/10-usef…

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588… 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。