上传文件进度js怎么写

上传文件进度js怎么写：使用XMLHttpRequest、利用FormData、实现进度事件监听

在现代Web开发中，文件上传是一个常见的需求。通过JavaScript实现文件上传进度显示，可以大大提升用户体验。主要思路包括使用XMLHttpRequest、利用FormData、实现进度事件监听。下面我们将详细展开如何实现这一需求。

一、使用XMLHttpRequest

XMLHttpRequest是实现Ajax请求的重要工具，可以用来进行异步的文件上传操作。通过它，我们能够在上传过程中监听进度事件，从而实现文件上传进度的显示。

1. 初始化XMLHttpRequest对象

首先，我们需要初始化一个XMLHttpRequest对象，并设置其open方法参数来指定请求类型和URL。

var xhr = new XMLHttpRequest();
xhr.open("POST", "your_upload_url_here", true);

2. 添加事件监听器

为了能够显示上传进度，我们需要为XMLHttpRequest对象添加一个事件监听器。主要监听的是progress事件。

xhr.upload.addEventListener("progress", function(event) {
    if (event.lengthComputable) {
        var percentComplete = (event.loaded / event.total) * 100;
        console.log(percentComplete.toFixed(2) + "% uploaded");
        // Here you can update the UI to show the progress
    }
}, false);

3. 发送请求

最后，使用FormData对象来封装文件数据，并调用XMLHttpRequest的send方法发送请求。

var formData = new FormData();
formData.append("file", document.getElementById("fileInput").files[0]);
xhr.send(formData);

二、利用FormData

FormData对象允许我们轻松地构建一组键值对，这些对可以通过XMLHttpRequest发送。它支持文件数据的封装和传输。

1. 创建FormData对象

创建一个FormData对象，并通过append方法将文件数据添加到其中。

var formData = new FormData();
var fileInput = document.getElementById("fileInput");
formData.append("file", fileInput.files[0]);

2. 处理多文件上传

如果需要上传多个文件，可以通过循环遍历文件输入框中的文件，并依次将它们添加到FormData对象中。

var files = fileInput.files;
for (var i = 0; i < files.length; i++) {
    formData.append("files[]", files[i]);
}

三、实现进度事件监听

在文件上传过程中，我们可以通过监听progress事件来获取上传进度，并在UI中进行实时更新。

1. 监听上传进度

通过为XMLHttpRequest对象的upload属性添加progress事件监听器，可以获取上传的进度信息。

xhr.upload.addEventListener("progress", function(event) {
    if (event.lengthComputable) {
        var percentComplete = (event.loaded / event.total) * 100;
        updateProgressBar(percentComplete);
    }
}, false);

2. 更新进度条

在progress事件监听器中，调用一个函数来更新UI中的进度条。

function updateProgressBar(percentComplete) {
    var progressBar = document.getElementById("progressBar");
    progressBar.style.width = percentComplete + "%";
    progressBar.textContent = percentComplete.toFixed(2) + "%";
}

四、处理上传完成和错误

除了进度事件，我们还需要处理文件上传完成和错误的情况。

1. 上传完成事件

监听XMLHttpRequest对象的load事件，以便在文件上传完成后进行处理。

xhr.addEventListener("load", function(event) {
    if (xhr.status == 200) {
        console.log("Upload complete!");
        // Handle successful upload here
    } else {
        console.log("Upload failed!");
        // Handle upload failure here
    }
}, false);

2. 上传错误事件

监听XMLHttpRequest对象的error事件，以便在文件上传出错时进行处理。

xhr.addEventListener("error", function(event) {
    console.log("Upload error!");
    // Handle upload error here
}, false);

五、示例代码

综上所述，以下是一个完整的文件上传进度显示的示例代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>File Upload Progress</title>
    <style>
        #progressBarContainer {
            width: 100%;
            background-color: #f3f3f3;
            border: 1px solid #ccc;
        }
        #progressBar {
            width: 0;
            height: 30px;
            background-color: #4caf50;
            text-align: center;
            color: white;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <input type="file" id="fileInput">
    <button onclick="uploadFile()">Upload</button>
    <div id="progressBarContainer">
        <div id="progressBar">0%</div>
    </div>
    <script>
        function uploadFile() {
            var fileInput = document.getElementById("fileInput");
            if (fileInput.files.length === 0) {
                alert("Please select a file to upload");
                return;
            }
            var xhr = new XMLHttpRequest();
            var formData = new FormData();
            formData.append("file", fileInput.files[0]);
            xhr.open("POST", "your_upload_url_here", true);
            xhr.upload.addEventListener("progress", function(event) {
                if (event.lengthComputable) {
                    var percentComplete = (event.loaded / event.total) * 100;
                    updateProgressBar(percentComplete);
                }
            }, false);
            xhr.addEventListener("load", function(event) {
                if (xhr.status == 200) {
                    console.log("Upload complete!");
                    // Handle successful upload here
                } else {
                    console.log("Upload failed!");
                    // Handle upload failure here
                }
            }, false);
            xhr.addEventListener("error", function(event) {
                console.log("Upload error!");
                // Handle upload error here
            }, false);
            xhr.send(formData);
        }
        function updateProgressBar(percentComplete) {
            var progressBar = document.getElementById("progressBar");
            progressBar.style.width = percentComplete + "%";
            progressBar.textContent = percentComplete.toFixed(2) + "%";
        }
    </script>
</body>
</html>

以上代码展示了如何使用JavaScript实现文件上传进度显示。通过使用XMLHttpRequest对象，我们可以在文件上传过程中监听progress事件，并实时更新UI中的进度条，从而提升用户体验。