javascript 上传文件144

前言

在 Web 开发中，文件上传是一个常见的需求，例如上传用户头像、文件附件或产品图片。利用 JavaScript，我们可以方便地实现文件上传功能，本文将详细介绍如何使用 JavaScript 上传文件。

HTML 表单

文件上传需要使用 HTML 表单，表单中需要包含一个文件输入元素 ()。该元素允许用户选择需要上传的文件。

XMLHttpRequest

要使用 JavaScript 上传文件，需要使用 XMLHttpRequest 对象。该对象可以与服务器进行异步通信，并发送和接收数据。
const xhr = new XMLHttpRequest();

FormData 对象

为了将文件发送到服务器，需要使用 FormData 对象。该对象允许我们创建包含文件和表单数据的表单数据。
const formData = new FormData();
("file", file);

发送请求

使用 FormData 对象，我们可以将数据发送到服务器。
("POST", "");
(formData);

处理服务器响应

当服务器响应时，我们可以使用以下事件处理程序来处理响应。
= function() {
if ( === 200) {
// 处理成功的响应
} else {
// 处理失败的响应
}
};

上传进度

我们可以使用以下事件处理程序来跟踪上传进度。
= function(event) {
// 获取已上传的字节数
const uploadedBytes = ;
// 获取总字节数
const totalBytes = ;
// 计算上传进度
const progress = (uploadedBytes / totalBytes) * 100;
};

服务器端处理

在服务器端，可以使用 PHP、等语言处理上传的文件。具体代码取决于所使用的服务器端技术。

示例代码

以下是一个完整的 JavaScript 文件上传示例：
("form").addEventListener("submit", (event) => {
();
const file = ("input[type=file]").files[0];
if (!file) {
alert("请选择要上传的文件");
return;
}
const xhr = new XMLHttpRequest();
("POST", "");
const formData = new FormData();
("file", file);
(formData);
= function() {
if ( === 200) {
alert("文件上传成功");
} else {
alert("文件上传失败");
}
};
= function(event) {
const progress = ( / ) * 100;
(`上传进度：${progress}%`);
};
});