javascript - 具有多 Ajax 文件上传和进度的 FileReader

Question

我有一个多文件输入框:

<input type="file" class="image_file" multiple>

我正在使用 FileReader 在上传图像时显示图像的预览。

我现在还想在上传每张图片时显示一个进度条。这是我尝试过的:

$('.image_file').change(function() {
    var input = $(this);
    var files = this.files;
    var total = files.length;
    var url = input.attr('data-url');

    for (var i = 0; i < total; i++) {
        var formData = new FormData();
        var file = files[i];

        formData.append('image_file', file);

        var reader = new FileReader();

        reader.onload = function(e) {
            var container = $('.photos .photo:not(.active):first');

            if (container.length) {
                container.css('background-image', 'url(' + e.target.result + ')').addClass('active uploading');
            }
        };

        reader.readAsDataURL(file);

        $.ajax({
            type: 'post',
            url: url,
            data: formData,
            cache: false,
            processData: false,
            contentType: false,
            xhr: function() {
                var myXhr = $.ajaxSettings.xhr();

                var progressElem = container.find('progress');

                if (myXhr.upload) {
                    myXhr.upload.addEventListener('progress', function(e) {
                        if (e.lengthComputable) {
                            progressElem.attr({
                                value: e.loaded,
                                max: e.total
                            });
                        }
                    }, false);
                }

                return myXhr;
            },
            success: function(result) {
                if (result.status == true) {
                    $('.success-message').show();
                }
                else {
                    alert('There was an error uploading your file.);
                }
            }
        });
    }
});

我遇到的问题是在 xhr 中的这一行功能:

var progressElem = container.find('progress');

图像预览出现，但 AJAX 上传无效。控制台中也没有显示任何错误。我想是因为var container设置在 reader.onload 内功能，xhr函数无权访问它。

如果我将该 var 移到该函数之外，图像上传工作正常，但只显示一张图像预览和一个进度条。

有人知道正确的做法吗？

Answer 1

问题是在 for 循环运行时创建和删除了一个 xhr。一旦代码完成，之前的 xhr 就会被销毁，因此它永远不会运行。

我解决这个问题的方法是不使用 jQuery 和/或为每个 for 循环创建一个新的 xmlhttprequest。

var array = []; //ADDED HERE

$('.image_file').change(function() {
    var input = $(this);
    var files = this.files;
    var total = files.length;
    var url = input.attr('data-url');

    for (var i = 0; i < total; i++) {
        var formData = new FormData();
        var file = files[i];

        formData.append('image_file', file);

        var reader = new FileReader();

        reader.onload = function(e) {
            var container = $('.photos .photo:not(.active):first');

            if (container.length) {
                container.css('background-image', 'url(' + e.target.result + ')').addClass('active uploading');
            }
        };

        reader.readAsDataURL(file);

        array[array.Length] = $.ajax({ //ADDED HERE
            type: 'post',
            url: url,
            data: formData,
            cache: false,
            processData: false,
            contentType: false,
            xhr: function() {
                var myXhr = $.ajaxSettings.xhr();

                var progressElem = container.find('progress');

                if (myXhr.upload) {
                    myXhr.upload.addEventListener('progress', function(e) {
                        if (e.lengthComputable) {
                            progressElem.attr({
                                value: e.loaded,
                                max: e.total
                            });
                        }
                    }, false);
                }

                return myXhr;
            },
            success: function(result) {
                if (result.status == true) {
                    $('.success-message').show();
                } else {
                    alert('There was an error uploading your file.);
                }
            }
        });
    }
});

我需要强调的是，我没有完全查看您的代码，但希望这会引导您朝着正确的方向前进。