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

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/rNLOyRm

2. 多文件上传

---

如果我们想上传多个文件，需要在标签上添加 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 时，可以这么做：

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

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/OJXymRP

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/zYBvdjZ

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/pobjMKv

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/eYzpwYj

8. 怎么上传目录上传?

---

我们可以上传整个目录吗?嗯，这是可能的，但有一些限制。有一个叫做webkitdirectory的非标准属性(目前只有谷歌浏览器还有Microsoft Edge支持按照文件夹进行上传)，它允许我们上传整个目录。

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

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

用户单击“上传”按钮后，就会进行上传。 这里要注意的重要一点。 FileList数组将以平面结构的形式包含有关上载目录中所有文件的信息。 对于每个File对象，webkitRelativePath属性表示目录路径。

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

现在，File 对象将将webkitRelativePath填充为：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YKjJFSPF-1605056544261)(/img/bVcH6Hp)]

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/dyXYRKp

9. 拖拽上传

---

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

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

Drag & Drop an Image

DROP HERE

最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

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

Drag & Drop an Image

DROP HERE

最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

[外链图片转存中…(img-5Hdna1Mi-1720081488883)]

[外链图片转存中…(img-swuy0VRJ-1720081488884)]