Question

我正在尝试使用XMLHttpRequest通过ajax制作多个上传图像。一切正常。图像成功发布，并且数据按预期返回。因此，返回的图像将追加到相关的div类。但是每次我一张一张地上传图片时，div类都从零开始。

使用此代码，在发送文件之前，我正在创建进度条div，在成功加载每个图像之后，将图像替换到loder。

for (var i = 0; i < input.files.length; i++) {
            var fileId = i;
        $('.up_preview').append('<div class="uploaded_photo_grid '+ fileId +'">' + 
            '<div class="pro_bar" id="progressbar_' + fileId + '" style="width:0%"></div>' + loader +
            '</div>');  
    }

使用此功能，无论有多少文件，我都会立即上传它们：

for (var i = 0; i < this.files.length; i++) { //Progress bar and status label's for each file genarate dynamically
            var fileId = i

            $('.up_preview').append('<div class="uploaded_photo_grid '+ fileId +'">' + 
                '<div class="pro_bar" id="progressbar_' + fileId + '" style="width:0%"></div>' + loader +
                '</div>');  

        }   

function uploadSingleFile(file, i) {    

        var fileId = i;
        var ajax = new XMLHttpRequest();
        //Progress Listener
        ajax.upload.onprogress = function (e) {
            var percent = (e.loaded / e.total) * 100;
            $('#progressbar_' + fileId).animate({"width": percent + "%"},800);
        };

        //Load Listener
        ajax.onreadystatechange = function (e) {
            if (this.readyState == 4 && this.status == 200) {
                var data = ajax.responseText;
                var rep = JSON.parse(data);

            $('#progressbar_' + fileId).css("width", "100%");
            setTimeout(function(){
                $('#progressbar_' + fileId).remove();
                $('.uploaded_photo_grid.'+ fileId).html('');
                $.each(file, function(){

                    if(rep.error !== ''){
                        $(".uploaded_photo_grid."+ fileId ).html(rep.name + ' yüklenemedi');
                    } else {
                        $(".uploaded_photo_grid."+ fileId ).html(
                            '<img class="previewItem" src="'+rep.fcontent+'" id="img_'+rep.id+'">');
                    }

                });                 
            },1500);
        }
    };

      Rest of code...
    }

我也尝试编辑这些代码行。它会增加每个文件的div值，但只会显示第一张图像。

var zero = $('.uploaded_photo_grid.0').length;
    for (var i = 0; i < this.files.length; i++) { //Progress bar and status label's for each file genarate dynamically
                var fileId;
                if(zero == 0){
                    uploadSingleFile(this.files[i], i);
                    console.log(this.files[i]);
                    fileId = i;
                } else {
                    uploadSingleFile(this.files[i+1], i+1);
                    fileId = i+1;
                    console.log(this.files[i]);
                }

                $('.up_preview').append('<div class="uploaded_photo_grid '+ fileId +'">' + 
                    '<div class="pro_bar" id="progressbar_' + fileId + '" style="width:0%"></div>' + loader +
                    '</div>');  

            }

我该怎么办？有办法更好地做到这一点吗？我的意思是通过XML通过带有进度栏的每个文件上传无格式的图像。我不选择使用插件，这不适合我。

Answer 1

以下是有问题的一行。

uploadSingleFile(this.files[i+1], i+1);

您希望传入i的{{1}}的值是上传的图像总数增加一。

一种执行此操作的方法是对uploadSingleFile，$('.up_preview').children().length和i求和。之所以加上1，是因为循环1中的i开始于

。

如何做“如果div类为0，则从1开始追加”

1 个答案: