如何解决JavaScript - 具有多ajax文件上传和进度的FileReader?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (114)

有一个多文件输入字段:

<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.);
                }
            }
        });
    }
});

有人知道这样做的正确方法吗?

提问于
用户回答回答于

试试以下代码:

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.);
            }
        }
    });
}

});

扫码关注云+社区

领取腾讯云代金券