在前端开发中，文件上传是一种常见的需求。为了提升用户体验，我们通常需要实现无格式上传文件的功能，即允许用户上传任意类型的文件。本文将介绍如何使用 HTML5 FormData 和 XMLHttpRequest 对象来实现无格式上传文件的功能。
使用 FormData 对象上传文件
HTML5 中引入了 FormData 对象，它可以帮助我们通过 JavaScript 将表单数据序列化为键值对，以便于提交到服务器。同时，FormData 对象还支持直接添加文件数据，这使得上传文件变得非常简单。
以下是一个示例代码，展示了如何使用 FormData 对象上传文件：
-- -------------------- ---- ------- ------ ------ ----------- --------------- ------- ------------- ------------------------------------ ------- -------- -------- ------------ - ----- --------- - ------------------------------------- ----- ---- - ------------------- ----- -------- - --- ----------- ----------------------- ------ ----- --- - --- ----------------- ---------------- ----------- ------------------- - ---------
在上面的示例代码中，我们创建了一个简单的表单，其中包含一个 <input type="file"> 元素和一个上传按钮。当用户点击上传按钮时，我们使用 JavaScript 获取用户选择的文件，并将其添加到 FormData 对象中。然后，我们使用 XMLHttpRequest 对象发送 POST 请求，请求的数据为该 FormData 对象。
需要注意的是，在使用 FormData 对象上传文件时，我们必须将 Content-Type 头设置为 multipart/form-data，这是因为 FormData 对象会将请求的数据序列化成多个部分，以便于向服务器传输二进制数据。
细节问题
在实现无格式上传文件的功能时，有一些细节问题需要注意：
1. 跨域资源共享(CORS)
由于浏览器的安全限制，我们只能通过 XMLHttpRequest 对象向同源服务器发送请求。如果我们想要向不同源的服务器上传文件，就需要使用跨域资源共享（CORS）技术。具体来说，我们需要在服务器端配置 Access-Control-Allow-Origin 头，允许特定的源访问该资源。
2. 文件大小限制
为了避免用户上传过大的文件导致服务器压力过大，我们通常需要对文件大小进行限制。可以通过 HTML5 中的 File 对象的 size 属性获取文件的大小，然后根据需求进行过滤。
3. 文件类型限制
虽然我们实现了无格式上传文件的功能，但我们仍然需要对文件类型进行限制。可以通过 HTML5 中的 File 对象的 type 属性获取文件的 MIME 类型，然后根据需求进行过滤。
4. 进度条显示
当用户上传大文件时，可能需要等待相当长的时间。为了提升用户体验，我们可以添加一个进度条来显示上传进度。可以通过 XMLHttpRequest 对象的 progress 事件监听上传进度，并根据进度更新进度条的状态。
总结
本文介绍了如何使用 HTML5 FormData 和 XMLHttpRequest 对象实现无格式上传文件的功能。具体来说，我们演示了如何使用 FormData 对象将表单数据序列化为键值对，并支持上传任意类型的文件。同时，我们还讨论了一些细节问题，例如跨域资源共享、文件大小限制、文件类型限制和进度条显示。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13554