表格文件上傳，添加加載微調，放置錯誤，未完成

Question

時，我有我在哪裏加載圖像預覽HTML表單上裝載微調去除。加載程序工作，爲每個要上載的文件創建一個，問題是加載程序始終位於div的左上角，並且只有第一個加載程序在預覽生成完成時被刪除。

if(window.File && window.FileList && window.FileReader) 
 
    { 
 
     $('#files').on('change', function(event) 
 
     { 
 
     var files = event.target.files; //FileList object 
 
     var output = document.getElementById("result"); 
 
     for(var i = 0; i< files.length; i++) 
 
     { 
 
      var file = files[ i ]; 
 
      //Only pics 
 
      if(file.type.match('image.*')) 
 
      { 
 
       if(this.files[ 0 ].size < 20971520) 
 
       {  
 
       \t // Show the loading gif while it uploads 
 
       \t var loading  = document.createElement("div"); 
 
       \t loading.innerHTML = "<div class='loading'></div>"; 
 
       \t output.insertBefore(loading, null); 
 
\t    \t // continue; 
 
\t    var picReader = new FileReader(); 
 
\t    picReader.addEventListener("load", function(event) 
 
\t    { 
 
\t    \t loading.innerHTML = ""; 
 
        var picFile = event.target; 
 
        var div  = document.createElement("div"); 
 
        div.innerHTML = '<div class="preview_container"><div class="thumbnail"><img src="' + picFile.result + '" alt="Image"></div><div class="image_title">' + file.name + '</div></div>'; 
 
        output.insertBefore(div, null);    
 
\t    }); 
 
\t    //Read the image 
 
\t    $('#clear, #result').show(); 
 
\t    picReader.readAsDataURL(file); 
 
       } 
 
       else 
 
       { 
 
       alert("Image Size is too big. Maximum size is 20MB."); 
 
       $(this).val(""); 
 
       } 
 
      } 
 
      else 
 
      { 
 
      \t alert("You can only upload image file."); 
 
      \t $(this).val(""); 
 
     \t \t } 
 
     }        
 
     }); 
 
    } 
 
    else 
 
    { 
 
     console.log("Your browser does not support File API"); 
 
    }

// Image previewer for uploading 
 
.thumbnail{ 
 
    height: \t \t \t \t \t \t \t \t 100px; 
 
    margin: \t \t \t \t \t \t \t \t 10px; 
 
    float: \t \t \t \t \t \t \t \t \t left; 
 
} 
 

 
#clear{ 
 
    display: \t \t \t \t \t \t \t \t none; 
 
} 
 
#result { 
 
    border: \t \t \t \t \t \t \t \t 4px dotted #cccccc; 
 
    display: \t \t \t \t \t \t \t \t none; 
 
    float: \t \t \t \t \t \t \t \t \t right; 
 
    margin: \t \t \t \t \t \t \t \t 0; 
 
    width: \t \t \t \t \t \t \t \t \t 511px; 
 
} 
 
.preview_container { 
 
    position: \t \t \t \t \t \t \t \t relative; 
 
    // height: \t \t \t \t \t \t \t \t \t 100px; 
 
    float: \t \t \t \t \t \t \t \t \t \t left; 
 
    margin: \t \t \t \t \t \t \t \t \t 10px; 
 
    z-index: \t \t \t \t \t \t \t \t \t 1; 
 
} 
 
.thumbnail > img { 
 
    height: \t \t \t \t \t \t \t \t \t 100px; 
 
} 
 
.image_title { 
 
    text-align: \t \t \t \t \t \t \t center; 
 
} 
 

 
$base-line-height:   24px; 
 
$white:      rgb(255,255,255); 
 
$off-white:     rgba($white, 0.2); 
 
$spin-duration:    1s; 
 
$pulse-duration:   750ms; 
 

 
@keyframes spin { 
 
    0% { 
 
    transform:    rotate(0deg); 
 
    } 
 
    100% { 
 
    transform:    rotate(360deg); 
 
    } 
 
} 
 

 
.loading { 
 
    border-radius:   50%; 
 
    width:     $base-line-height; 
 
    height:     $base-line-height; 
 
    border:     .25rem solid $off-white; 
 
    border-top-color:  $white; 
 
    animation:    spin $spin-duration infinite linear; 
 
    &--double { 
 
    border-style:   double; 
 
    border-width:   .5rem; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<input id="files" type="file" name="images[]" multiple/> 
 
<button type="button" id="clear">Clear</button> 
 
<output id="result" />

這裏是我到目前爲止小提琴 - https://jsfiddle.net/os394n57/

我與放置加載動畫在圖像預覽將是和去除尋求幫助加載動畫作爲預覽依次爲每個預覽生成。

乾杯提前，

的Blinky

Answer 1

這是由於回調的異步特性，當load火的第一個圖像的循環已經是或者超過（99％），或在其最後一次迭代，從而loading在所有這些回調將具有相同的值（終值），因此功能會擦只有單一的裝載機DIV（一個最後圖像）保持裝載機的其餘部分是。你可以實現一個閉合來解決這個問題

var picReader = new FileReader(); 
// -------------------------------------------------------------------------- 
picReader.onload = (function(file,loading) 
{ 
    return function myFunc(event){ 
     loading.innerHTML = ""; 
     var picFile = event.target; 
     var div  = document.createElement("div"); 
     div.innerHTML = '<div class="preview_container"><div class="thumbnail"><img src="' + picFile.result + '"  alt="Image"></div><div  class="image_title">' + file.name + '</div></div>'; 
     output.insertBefore(div, null); 
    } 

})(file,loading); 
//--------------------------------------------------------------------------- 
//Read the image 
$('#clear, #result').show(); 

有豐富的資源，這樣您就可以讀取那些爲更好地瞭解，但在簡單的話關閉將在某一時刻在內部函數引用的所有值隔離它們存放在安全的地方，並給他們的功能時，他們準備這麼辦的，即使名稱相同的變量會得到assinged一些不同的值，只要不影響那些在封閉

關於CSS沙盒，我所知甚少上，你可能嘗試像margin，margin-left等