文件上传是 Web 应用程序中常见的需求之一，尤其是在社交媒体、电子商务和协作工具中。实现文件上传有几种不同的方法，包括使用表单、 AJAX 和 WebSocket 等技术。
本文将介绍如何使用 HTML5 的 File API 和 FormData 对象来实现文件上传，并提供相应的示例代码和指导意义。
文件选择和上传
通过 HTML5 的 <input type="file"> 元素可以让用户方便地选择文件并上传文件。这个元素会弹出一个文件选择窗口，用户可以从本地文件系统中选择一个或多个文件。
<form>
<label>
Select file:
<input type="file" name="file">
</label>
<button type="submit">Upload</button>
</form>此外，还需要添加一个表单提交事件监听器，在提交时避免浏览器默认行为并处理文件上传。
-- -------------------- ---- -------
----- ---- - -------------------------------
------------------------------- ----- ------- -- -
-----------------------
----- -------- - --- -----------------------
----- -------- - ----- ---------------- -
------- -------
----- ---------
---
----------------------
---上面的代码使用了 ES6 的 async/await 和 Fetch API 来处理表单提交事件。FormData 对象可以很容易地构建 multipart/form-data 格式的数据，以支持文件上传。在这个例子中，我们向服务器发送一个 POST 请求，并将 FormData 对象作为请求体传递。
文件预览和验证
在用户选择文件之后，可以通过 File API 来读取文件并显示文件预览。此外，还可以对文件执行各种验证，例如文件大小、文件类型和文件名称等。
-- -------------------- ---- -------
----- --------- - -------------------------------------------
------------------------------------ ------- -- -
----- ----- - -------------------
--- ------ ---- -- ------ -
-- --------------------------------- -
---------------------- ---- ----- - - -----------
---------
-
-- ---------- - ---- - ----- -
------------------- ---- ------- ------ - - -----------
---------
-
----- ------ - --- -------------
------------------------------- -- -- -
----- --- - ------------------------------
------- - --------------
-------------------------------
---
---------------------------
-
---上面的代码演示了如何使用 File API 读取和预览图片文件。在 onchange 事件中，我们首先遍历所有选择的文件，并执行基本的文件验证。如果文件类型不是以 "image/" 开头或文件大小超过了限制，就输出错误消息并跳过该文件。如果文件通过验证，则使用 FileReader 对象读取文件内容，并将其转换为 DataURL 格式，以便在页面上显示。
总结
使用 HTML5 的 File API 和 FormData 对象可以轻松地实现文件上传和预览。在上传文件之前，可以执行各种验证操作以确保所选文件符合特定的要求。此外，还可以使用 Fetch API 实现异步文件上传，并提供反馈给用户。
通过本文的示例代码和指导意义，您应该能够理解如何在前端实现文件上传和预览，并将其应用于您自己的 Web 应用程序中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24967