JavaScript 文件上传详解与实现

文件上传是 Web 开发中常见的功能之一，几乎所有的 Web 应用都会涉及到上传文件，如上传图片、视频、文档等。

一、基本文件上传实现

1.1 HTML 表单元素

文件上传通常通过 <input> 元素的 type="file" 来实现。以下是一个简单的 HTML 文件上传表单：

<form id="uploadForm" enctype="multipart/form-data"><input type="file" id="fileInput" name="file" /><button type="submit">Upload</button>
</form>

<input type="file"> 元素允许用户选择文件，而 <form> 元素则用于提交这些文件。

1.2 使用 JavaScript 实现文件上传

现代 Web 开发中，文件上传一般通过 JavaScript 来处理，以便实现更好的用户体验，如异步上传（AJAX）、进度条显示等。

document.getElementById('uploadForm').addEventListener('submit', function(event) {event.preventDefault(); // 防止表单的默认提交行为const fileInput = document.getElementById('fileInput');const file = fileInput.files[0];const formData = new FormData();formData.append('file', file);fetch('/upload', {method: 'POST',body: formData,}).then(response => response.json()).then(data => {console.log('Upload successful:', data);}).catch(error => {console.error('Error:', error);});
});

在这个示例中，我们使用了 fetch API 来异步发送文件到服务器。FormData 对象用于构建包含文件数据的请求体。

二、上传进度显示

为了提高用户体验，显示文件上传的进度非常重要。我们可以使用 XMLHttpRequest 结合 ProgressEvent 来实现进度条。

document.getElementById('uploadForm').addEventListener('submit', function(event) {event.preventDefault();const fileInput = document.getElementById('fileInput');const file = fileInput.files[0];const formData = new FormData();formData.append('file', file);const xhr = new XMLHttpRequest();xhr.open('POST', '/upload', true);xhr.upload.addEventListener('progress', function(event) {if (event.lengthComputable) {const percentComplete = (event.loaded / event.total) * 100;console.log(`Upload progress: ${percentComplete}%`);// 更新进度条的显示}});xhr.onload = function() {if (xhr.status === 200) {console.log('Upload successful:', xhr.responseText);} else {console.error('Upload failed:', xhr.responseText);}};xhr.send(formData);
});

在这个例子中，xhr.upload.addEventListener('progress', ...) 用于监听上传的进度，并计算完成百分比。

三、多文件上传

有时我们需要允许用户同时上传多个文件。这可以通过在 <input> 元素中添加 multiple 属性来实现。

<input type="file" id="fileInput" name="files" multiple />

然后在 JavaScript 中处理文件列表：

const files = document.getElementById('fileInput').files;for (const file of files) {const formData = new FormData();formData.append('files', file);fetch('/upload', {method: 'POST',body: formData,}).then(response => response.json()).then(data => {console.log('Upload successful:', data);}).catch(error => {console.error('Error:', error);});
}

这个示例展示了如何遍历 files 列表，并分别上传每一个文件。

四、处理上传后的响应

上传文件后，服务器通常会返回一些信息，如上传成功或失败、文件存储路径等。处理这些响应可以通过 fetch 的 .then() 方法来完成。

fetch('/upload', {method: 'POST',body: formData,
})
.then(response => {if (!response.ok) {throw new Error('Network response was not ok');}return response.json();
})
.then(data => {console.log('Server response:', data);
})
.catch(error => {console.error('Upload failed:', error);
});