独家秘诀：轻松实现原生JS上传图片（FormData，可预览，一次多图）
2024-02-21 12:02:10
原生 JS 图片上传：实现轻松的多图上传、预览和处理
在当今互联网时代，图片上传已成为网站和应用程序不可或缺的功能。作为前端开发人员，精通原生 JS 图片上传技巧至关重要。本文将深入探讨原生 JS 中实现文件上传、图片预览和一次性多图上传的独家秘诀。
1. 入门基础
在踏入上传之旅之前，需要牢固掌握以下基础概念：
- HTML 输入元素的 type 属性： 该属性指定输入元素的类型，其中 type="file" 用于创建文件选择控件，允许用户选择要上传的文件。
- FormData 对象： FormData 对象是一个特殊的表单数据对象，可按键值对存储数据，包括文件数据。
- FileReader 对象： FileReader 对象允许异步读取文件内容。
2. 实施步骤
有了必要的知识基础，让我们开始图片上传功能的实现。
2.1 创建文件选择控件
首先，在 HTML 页面中创建一个文件选择控件，代码如下：
<input type="file" id="file-input" multiple>
该控件支持多文件选择，用户可一次选择多个文件进行上传。
2.2 获取已选文件
用户选择文件后，使用以下代码获取已选文件：
const files = document.querySelector('#file-input').files;
该代码返回一个 FileList 对象，包含用户选择的所有文件。
2.3 创建 FormData 对象
接下来，创建一个 FormData 对象来存储文件数据：
const formData = new FormData();
2.4 将文件添加到 FormData 对象
将已选文件添加到 FormData 对象中：
for (let i = 0; i < files.length; i++) {
formData.append('file', files[i]);
}
2.5 发送 FormData 对象
最后，将 FormData 对象发送到服务器进行上传：
fetch('/upload', {
method: 'POST',
body: formData
}).then((response) => {
// 处理服务器响应
});
3. 图片预览
在上传图片之前，通常希望在页面上显示图片预览。使用以下代码实现图片预览：
const reader = new FileReader();
reader.onload = function () {
const preview = document.querySelector('#preview');
preview.src = reader.result;
};
reader.readAsDataURL(file);
该代码使用 FileReader 对象读取所选文件，并将文件内容转换为 DataURL，然后将其设置给 img 元素的 src 属性，实现图片预览。
4. 多图一次性上传
FormData 对象支持一次性上传多个文件，通过使用上面的文件选择控件和 FormData 对象即可实现。
5. 总结
通过掌握这些技巧，您已成功掌握原生 JS 图片上传的精髓，包括 FormData 文件上传、图片预览和一次性多图上传。这些技巧将为您的网站和应用程序增添强大的功能。
常见问题解答
-
如何限制上传文件的大小或类型？
- 在 HTML 输入元素中使用 accept 属性或在服务器端进行验证。
-
如何处理大文件上传？
- 使用分块上传技术或流式传输 API。
-
如何防止跨域问题？
- 确保服务器支持 CORS 或使用 JSONP。
-
如何获得上传进度？
- 使用 XMLHttpRequest 或 fetch API 的进度事件。
-
如何上传二进制数据？
- 将文件内容转换为 ArrayBuffer 并将其附加到 FormData 对象。
