在Web应用程序中，文件上传是一项常见的操作。它允许用户将文件从本地计算机上传到服务器上。在前端开发中，我们可以使用HTML5提供的File API来实现这个功能。
File API 的基础知识
File API 是 HTML5 中新增的一项API，它提供了一系列与文件相关的接口。通过这些接口，我们可以访问用户选择的文件的元数据、读取文件内容、以及将文件上传到服务器等操作。
文件选择框
首先，我们需要一个文件选择框来让用户选择要上传的文件。我们可以使用 <input type="file"> 元素创建一个文件选择框：
<input type="file" id="fileInput">
当用户点击这个元素时，会弹出一个文件选择对话框，用户可以在其中选择要上传的文件。
获取文件元数据
选择完文件后，我们可以使用 File API 提供的 File 对象来获取文件的元数据。File 对象包含了文件的名称、大小、类型等信息。例如，我们可以获取文件名和文件大小：
const fileInput = document.getElementById('fileInput'); const file = fileInput.files[0]; console.log(file.name); // 输出文件名 console.log(file.size); // 输出文件大小（单位为字节）
读取文件内容
除了获取文件元数据外，我们还可以使用 File API 提供的 FileReader 对象来读取文件内容。FileReader 对象提供了多种读取文件的方法，例如 readAsText() 可以将文件读取为文本，readAsArrayBuffer() 可以将文件读取为二进制数据等。
const reader = new FileReader(); reader.onload = function() { console.log(reader.result); // 输出文件内容 }; reader.readAsText(file); // 以文本形式读取文件内容
上传文件到服务器
最后，我们可以使用 AJAX 或 Fetch API 将文件上传到服务器。首先，我们需要创建一个表单对象，并将要上传的文件作为表单的一个字段：
<form id="uploadForm"> <input type="file" name="file"> </form>
然后，我们可以使用 FormData 对象将表单数据打包成一个 HTTP 请求体：
const uploadForm = document.getElementById('uploadForm'); const formData = new FormData(uploadForm); fetch('/upload', { method: 'POST', body: formData });
这样就完成了文件上传的操作。
示例代码
下面是一个完整的示例代码，演示了如何实现文件上传的功能：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------------------- ------- ------ ------ ----------- --------------- ------- ------------------------------- -------- ----- --------- - ------------------------------------- ----- ------------ - ---------------------------------------- ----- ---------- - ------------------------------- -- -------- ----- --------- - -------------------------------- -- -------- -------------- - ------- -------------- - ------- ---------------------------------- -- ----------- -------------------- - ---------- - ----- ---- - ------------------- ----- ------ - --- ------------- ------------- - ---------- - --------------- - --- -- ------------------- ---------------- - ------- ------- ----- --- -------------------- --- -- ------------------------ -- --------- ------- -------展开代码
通过这个示例代码，你可以学习到如何使用 HTML5 的 File API 实现文件上传功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10747
