js上传文件的进度条怎么做

JS上传文件的进度条怎么做：使用XMLHttpRequest对象的upload属性、监听progress事件、更新UI元素。

在现代Web应用中，文件上传是一个常见需求，而用户体验（UX）尤为重要。通过在文件上传过程中显示进度条，可以让用户了解上传进度，从而提升整体体验。本文将详细介绍如何使用JavaScript来实现文件上传的进度条。

一、使用XMLHttpRequest对象的upload属性

要实现文件上传的进度条，首先要理解XMLHttpRequest对象的upload属性。这个属性用于表示上传进度，并且支持监听progress事件。

1. 创建XMLHttpRequest对象

首先，我们需要创建一个XMLHttpRequest对象。这个对象是进行HTTP请求的核心。

const xhr = new XMLHttpRequest();

2. 配置请求

配置请求的URL和HTTP方法，通常是POST方法，因为文件上传通常会提交到服务器。

xhr.open('POST', 'your-upload-url', true);

3. 监听progress事件

通过监听progress事件，我们可以获取上传进度，并更新UI。

xhr.upload.addEventListener('progress', function(e) {
    if (e.lengthComputable) {
        const percentComplete = (e.loaded / e.total) * 100;
        console.log(`Progress: ${percentComplete}%`);
    }
});

4. 发送请求

最后，将文件数据发送到服务器。

const formData = new FormData();
formData.append('file', fileInput.files[0]);
xhr.send(formData);

二、监听progress事件

监听progress事件是实现进度条的关键。通过这个事件，我们可以获取上传过程中的实时数据，并更新进度条的UI。

1. 获取文件大小和已上传大小

在progress事件的回调函数中，e.loaded表示已上传的字节数，e.total表示文件的总字节数。

xhr.upload.addEventListener('progress', function(e) {
    if (e.lengthComputable) {
        const percentComplete = (e.loaded / e.total) * 100;
        updateProgressBar(percentComplete);
    }
});

2. 更新UI元素

我们需要一个进度条元素来显示上传进度。在HTML中可以使用<progress>元素：

<progress id="uploadProgress" max="100" value="0"></progress>

然后在JavaScript中更新这个元素的值：

function updateProgressBar(percent) {
    const progressBar = document.getElementById('uploadProgress');
    progressBar.value = percent;
}

三、处理其他事件

除了progress事件外，还需要处理其他事件来确保用户体验良好。

1. load事件

当文件上传完成后，会触发load事件。可以在这个事件中处理上传成功的逻辑。

xhr.addEventListener('load', function() {
    if (xhr.status === 200) {
        console.log('Upload complete!');
        // 更新UI，显示上传成功的消息
    } else {
        console.error('Upload failed!');
        // 更新UI，显示上传失败的消息
    }
});

2. error事件

当上传过程中出现错误时，会触发error事件。可以在这个事件中处理错误逻辑。

xhr.addEventListener('error', function() {
    console.error('Upload error!');
    // 更新UI，显示上传错误的消息
});

3. abort事件

当上传被取消时，会触发abort事件。可以在这个事件中处理取消逻辑。

xhr.addEventListener('abort', function() {
    console.warn('Upload aborted!');
    // 更新UI，显示上传取消的消息
});

四、综合实例

以下是一个完整的文件上传进度条的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload with Progress Bar</title>
</head>
<body>
    <input type="file" id="fileInput">
    <button id="uploadButton">Upload</button>
    <progress id="uploadProgress" max="100" value="0"></progress>
    <script>
        document.getElementById('uploadButton').addEventListener('click', function() {
            const fileInput = document.getElementById('fileInput');
            if (fileInput.files.length > 0) {
                const xhr = new XMLHttpRequest();
                xhr.open('POST', 'your-upload-url', true);
                xhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        const percentComplete = (e.loaded / e.total) * 100;
                        updateProgressBar(percentComplete);
                    }
                });
                xhr.addEventListener('load', function() {
                    if (xhr.status === 200) {
                        console.log('Upload complete!');
                        // 更新UI，显示上传成功的消息
                    } else {
                        console.error('Upload failed!');
                        // 更新UI，显示上传失败的消息
                    }
                });
                xhr.addEventListener('error', function() {
                    console.error('Upload error!');
                    // 更新UI，显示上传错误的消息
                });
                xhr.addEventListener('abort', function() {
                    console.warn('Upload aborted!');
                    // 更新UI，显示上传取消的消息
                });
                const formData = new FormData();
                formData.append('file', fileInput.files[0]);
                xhr.send(formData);
            }
        });
        function updateProgressBar(percent) {
            const progressBar = document.getElementById('uploadProgress');
            progressBar.value = percent;
        }
    </script>
</body>
</html>

五、使用Fetch API实现文件上传

虽然XMLHttpRequest是实现文件上传的经典方式，但Fetch API提供了一种更现代和简洁的方式来进行HTTP请求。接下来我们将使用Fetch API实现文件上传，并且显示进度条。

1. 创建上传函数

使用Fetch API进行文件上传时，我们需要借助ReadableStream来读取文件内容，并更新进度条。

async function uploadFile(file) {
    const url = 'your-upload-url';
    const response = await fetch(url, {
        method: 'POST',
        body: file,
        headers: {
            'Content-Type': file.type
        }
    });
    if (response.ok) {
        console.log('Upload complete!');
    } else {
        console.error('Upload failed!');
    }
}

2. 读取文件内容并更新进度条

为了实现进度条，我们需要创建一个ReadableStream来读取文件内容，并在读取过程中更新进度条。

function createUploadStream(file) {
    const totalSize = file.size;
    let uploadedSize = 0;
    return new ReadableStream({
        start(controller) {
            const reader = file.stream().getReader();
            function push() {
                reader.read().then(({ done, value }) => {
                    if (done) {
                        controller.close();
                        return;
                    }
                    uploadedSize += value.length;
                    const percentComplete = (uploadedSize / totalSize) * 100;
                    updateProgressBar(percentComplete);
                    controller.enqueue(value);
                    push();
                });
            }
            push();
        }
    });
}

3. 更新上传函数以使用可读流

在上传函数中使用createUploadStream创建的可读流。

async function uploadFile(file) {
    const url = 'your-upload-url';
    const stream = createUploadStream(file);
    const response = await fetch(url, {
        method: 'POST',
        body: stream,
        headers: {
            'Content-Type': file.type
        }
    });
    if (response.ok) {
        console.log('Upload complete!');
    } else {
        console.error('Upload failed!');
    }
}

4. 综合实例

以下是使用Fetch API和ReadableStream实现文件上传进度条的完整示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload with Progress Bar</title>
</head>
<body>
    <input type="file" id="fileInput">
    <button id="uploadButton">Upload</button>
    <progress id="uploadProgress" max="100" value="0"></progress>
    <script>
        document.getElementById('uploadButton').addEventListener('click', function() {
            const fileInput = document.getElementById('fileInput');
            if (fileInput.files.length > 0) {
                uploadFile(fileInput.files[0]);
            }
        });
        async function uploadFile(file) {
            const url = 'your-upload-url';
            const stream = createUploadStream(file);
            const response = await fetch(url, {
                method: 'POST',
                body: stream,
                headers: {
                    'Content-Type': file.type
                }
            });
            if (response.ok) {
                console.log('Upload complete!');
            } else {
                console.error('Upload failed!');
            }
        }
        function createUploadStream(file) {
            const totalSize = file.size;
            let uploadedSize = 0;
            return new ReadableStream({
                start(controller) {
                    const reader = file.stream().getReader();
                    function push() {
                        reader.read().then(({ done, value }) => {
                            if (done) {
                                controller.close();
                                return;
                            }
                            uploadedSize += value.length;
                            const percentComplete = (uploadedSize / totalSize) * 100;
                            updateProgressBar(percentComplete);
                            controller.enqueue(value);
                            push();
                        });
                    }
                    push();
                }
            });
        }
        function updateProgressBar(percent) {
            const progressBar = document.getElementById('uploadProgress');
            progressBar.value = percent;
        }
    </script>
</body>
</html>

通过以上内容，我们已经详细介绍了如何使用JavaScript实现文件上传的进度条。通过使用XMLHttpRequest对象的upload属性，可以方便地监听上传进度，并更新UI元素。同时，我们也探讨了使用Fetch API和ReadableStream来实现文件上传进度条的新方法。希望这些内容能够帮助你在实际项目中实现文件上传的进度条，从而提升用户体验。