将 FileReader 中的 img 添加到最新 class | FileReader 在循环后执行

Question

我正在重建多图上传功能。

但是我遇到了 fileReader() 在整个循环之后执行的问题。

在循环内，我为每个拖动的图像克隆一个容器，期望第一个。此容器具有 class 和 ID "clonemulti"。此容器内是 "file-return" 容器，它也被克隆了。

例如，我将 3 张图像拖入文件输入字段。循环运行，ParseFile() 函数逐步将每个 "file-return" 的名称和大小的值附加到每个图像 (1,2,3)，但是 setupReader() 函数将所有图像附加到最后 (3) 个容器。

var files = e.target.files || e.dataTransfer.files;
$('.clonemulti').slice(1).remove();
for (var i = 0, f; f = files[i]; i++) {     

            if(i > 0){
                $newimg = $('#clonemulti').clone();
                $newimg.removeAttr('id');
                $newimg.find('.file-return p').remove('p');
                $newimg.insertAfter( ".clonemulti:last" );  
            } 


            $('.filenameauto').last().val(f.name);
            ParseFile(f);   
            setupReader(f);
        }


function ParseFile(file) {


  String.prototype.trunc = String.prototype.trunc ||
  function(n){
      return (this.length > n) ? this.substr(0, n-1) + '&hellip;' : this;
  };

   var filenametrunc = file.name.trunc(25);

    fileinputappend = 
        "<p class='center'><span class='imagesrc'></span><br/> <strong>" + filenametrunc +
        "</strong> size: <strong>" + Math.round(file.size /1000)  +
        "</strong> Kb</p>";


    $( fileinputappend ).appendTo( '.file-return:last' );          

}

    function setupReader(file) {
            var reader = new FileReader();
            reader.onload = function(event) {
                $($.parseHTML('<img>')).attr('src', event.target.result).appendTo('.imagesrc:last');

            }
           reader.readAsDataURL(file);


    }

我如何处理 setupReader() 函数的执行并将图像附加到最后一个 "file-return" "imagesrc" class 就像 ParseFile() 函数一样？

这是一个 Fiddle 的例子： https://jsfiddle.net/3xtg6hew/1/

Answer 1

我自己解决了这个问题，我自己制作了一个循环 class 并在其中添加图像：

    function setupReader(file) {
        var z = 0;
        $('.imagesrc').each(function(){
            var reader = new FileReader();
            var thisclass = $(this);

            reader.onload = function(event) {

                var appendattr = $($.parseHTML('<img>')).attr('src', event.target.result);
                $(thisclass).append(appendattr);

            }
           reader.readAsDataURL(file[z]);

           z++;

        })

    }

将 FileReader 中的 img 添加到最新 class | FileReader 在循环后执行

Add img from FileReader to latest class | FileReader gets executed after loop

javascript

jquery

image-uploading