如何使用 JavaScript 上传文件并跟踪其进度？

使用 JavaScript 上传文件

要上传通过输入元素选择的文件，您可以使用 FormData 对象。方法如下：

1.创建 FormData 对象：

let formData = new FormData();

2.将文件附加到 FormData：

let photo = document.getElementById("image-file").files[0];
formData.append("photo", photo);

3.发送数据到服务器：

使用 fetch API，可以将 FormData 发送到指定的 URL：

fetch('/upload/image', {method: "POST", body: formData});

监听上传进度

要监控上传进度，可以使用EventTarget的addEventListener()方法：

let progressBar = document.getElementById("progress-bar");

formData.addEventListener("progress", (event) => {
    if (event.lengthComputable) {
        let percentComplete = Math.round((event.loaded / event.total) * 100);
        progressBar.style.width = percentComplete + "%";
    }
});

完整代码示例

将文件上传和进度跟踪合并到一个示例中：

let formData = new FormData();
let photo = document.getElementById("image-file").files[0];
formData.append("photo", photo);

let progressBar = document.getElementById("progress-bar");

fetch('/upload/image', {method: "POST", body: formData})
.then((response) => {
    console.log(response);  // Handle server response
})
.catch((error) => {
    console.error(error);  // Handle upload failure
});

formData.addEventListener("progress", (event) => {
    if (event.lengthComputable) {
        let percentComplete = Math.round((event.loaded / event.total) * 100);
        progressBar.style.width = percentComplete + "%";
    }
});

此代码将创建一个到“/upload/image” URL 的 POST 请求，发送文件数据，并使用进度显示上传进度酒吧。

以上是如何使用 JavaScript 上传文件并跟踪其进度？的详细内容。更多信息请关注PHP中文网其他相关文章！