Как сделать «Если класс div равен 0, тогда начните с 1, чтобы добавить» - PullRequest
Новая
       69

Как сделать «Если класс div равен 0, тогда начните с 1, чтобы добавить»

0 голосов
/ 23 ноября 2018

Я пытаюсь сделать несколько загрузок изображений через ajax с XMLHttpRequest.Все хорошо.Изображения размещаются успешно, а данные возвращаются, как и ожидалосьТаким образом, возвращаемые изображения добавляются в связанный класс div.Но каждый раз, когда я загружаю изображения одно за другим, класс div начинается с нуля.

С этим кодом, прежде чем отправлять файл (ы), я создаю div прогрессбара, после каждого успешно загруженного изображения изображение заменяется на загрузчик.. 

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 с прогрессбаром для каждого файла.Я не хочу использовать плагин, это не для меня.

1 Ответ

0 голосов
/ 23 ноября 2018

Следующая строка является проблемной. 

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

Вы хотите, чтобы значение для i, переданное в uploadSingleFile, равнялось общему количеству загруженных изображений, увеличенному на единицу.

Одним из подходов для этого является суммирование $('.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);
}
...