如何实现FormData与Ajax结合的上传进度监控？-酷北运营网

FormData 与 Ajax 上传进度监控

一、什么是FormData？

FormData对象是HTML5中引入的一种接口，用于组装一组键值对，通过XMLHttpRequest发送请求，它能够灵活地发送表单数据，因为可以独立于表单使用，如果表单的编码类型设置为multipart/form-data，那么通过FormData传输的数据格式和表单通过submit()方法传输的数据格式相同。

二、如何创建FormData对象？

要创建一个FormData对象，可以使用以下代码：

var formData = new FormData();
formData.append("username", "Groucho");
formData.append("userid", 123456);

对于文件上传，可以这样做：

var fileInputElement = document.getElementById('fileInput');
formData.append("userfile", fileInputElement.files[0]);

三、Ajax文件上传与进度监控

基础实现

使用jQuery的Ajax方法发送FormData数据，并实时监控上传进度：

$.ajax({
    url: 'uploadUrl',
    type: 'POST',
    data: formData,
    processData: false, // 必须不设置内容类型
    contentType: false, // 必须不处理数据
    xhr: function() { // 获取原生的xhr对象
        var xhr = $.ajaxSettings.xhr();
        if (xhr.upload) {
            // 添加 progress 事件监听
            xhr.upload.addEventListener('progress', function(e) {
                if (e.lengthComputable) {
                    var percentComplete = e.loaded / e.total;
                    console.log(percentComplete + '% complete');
                }
            }, false);
        }
        return xhr;
    },
    success: function(response) { console.log('Success!'); },
    error: function(error) { console.log('Error!'); }
});

详细步骤

1、创建FormData对象：将文件和其他数据添加到FormData对象中。

2、配置Ajax请求：使用processData: false和contentType: false来避免jQuery处理数据和内容类型。

3、监听进度事件：通过原生的XMLHttpRequest对象的upload.onprogress事件监听上传进度，并计算上传百分比。

4、处理响应：在Ajax请求的回调函数中处理成功或失败的情况。

四、示例代码

以下是一个完整的示例，展示如何使用FormData和Ajax实现文件上传及进度监控：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FormData Ajax Upload</title>
</head>
<body>
    <input type="file" id="fileInput">
    <button id="uploadButton">Upload</button>
    <div id="progressBar" style="display:none; width:0%; background-color:green;"></div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#uploadButton').click(function() {
                var fileInput = document.getElementById('fileInput');
                var formData = new FormData();
                formData.append('file', fileInput.files[0]);
                $.ajax({
                    url: 'uploadUrl',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    xhr: function() {
                        var xhr = $.ajaxSettings.xhr();
                        if (xhr.upload) {
                            xhr.upload.addEventListener('progress', function(e) {
                                if (e.lengthComputable) {
                                    var percentComplete = e.loaded / e.total * 100;
                                    $('#progressBar').css('width', percentComplete + '%').show();
                                }
                            }, false);
                        }
                        return xhr;
                    },
                    success: function(response) {
                        alert('Upload completed!');
                    },
                    error: function(error) {
                        alert('Upload failed!');
                    }
                });
            });
        });
    </script>
</body>
</html>

五、相关问题与解答

问题1：如何在上传过程中显示上传速度？

解答：可以在progress事件中计算单位时间内的上传字节数，从而得到上传速度。

let oldLoaded = 0;
let oldTime = new Date().getTime();
xhr.upload.onprogress = function(e) {
    let nowLoaded = e.loaded;
    let nowTime = new Date().getTime();
    let bytesUploaded = nowLoaded oldLoaded;
    let timeElapsed = (nowTime oldTime) / 1000; // in seconds
    let velocity = bytesUploaded / timeElapsed; // bytes per second
    oldLoaded = nowLoaded;
    oldTime = nowTime;
    console.log('Upload speed: ' + velocity + ' bytes/s');
};

问题2：如何取消文件上传？

解答：可以通过调用XMLHttpRequest对象的abort()方法来取消上传：

let xhr = new XMLHttpRequest();
xhr.open('POST', 'uploadUrl', true);
xhr.send(formData);
document.getElementById('cancelBtn').addEventListener('click', function() {
    xhr.abort();
});

小伙伴们，上文介绍了“formdata ajax 上传进度监控”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。

如何实现FormData与Ajax结合的上传进度监控？

基础实现

详细步骤

问题1：如何在上传过程中显示上传速度？

问题2：如何取消文件上传？

相关文章

如何使用Formdata上传图片？

如何正确使用form.js进行表单提交？

发表评论

暂无评论，1人围观

目录[+]