怎么做 "If div class is 0 then start from 1 to append"

Question

我正在尝试使用 XMLHttpRequest 通过 ajax 上传多张图片。一切正常。图像 post 成功，数据 returns 符合预期。所以返回的图像附加到相关 div class。但是每次我一张一张上传图片，divclass从零开始

使用此代码，在发送文件之前，我正在创建进度条 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);

您希望 uploadSingleFile 中传递的 i 的值是上传的图片总数加一。

一种方法是对 $('.up_preview').children().length、i 和 1 求和。 1 被添加到总和中，因为循环中的 i 从 0.

开始

// var zero = $('.uploaded_photo_grid.0').length;
var numImages = $('.up_preview').children().length;

if (numImages === 0) {
  //...
} else {
  uploadSingleFile(this.files[i+1], numImages + i + 1);
}

怎么做 "If div class is 0 then start from 1 to append"

How to do "If div class is 0 then start from 1 to append"

php

xml

jquery

uploader