以與用戶輸入相同的順序多次上傳圖像

我有一個用於圖像文件的多重上傳，並且我曾經面對的問題是圖像以與用戶輸入不同的順序出現。例如，用戶選擇Img1，Img2，Img3，Img4。它出現的順序可能是Img2，Img4，Img3，Img1。以與用戶輸入相同的順序多次上傳圖像

這會導致問題，因爲我必須將它們鏈接到文本字段（圖像說明），並且每個文本字段必須匹配正確的圖像。我做了一些挖掘和發現，我可以利用這個代碼在這裏，以確保它在相同的順序被上傳：

HTML

<input id="uploadfiles" multiple="multiple" name="photos" type="file">

的JavaScript

$("#uploadfiles").change(function(){ 
    imgpreview(document.getElementById('uploadfiles').files); 
}); 

function imgpreview(files) { 
    var count = 0; 
    for (var i = 0, f; f = files[i]; i++) { 
     (function() { 
      var div = $("<div></div>"); 
      var reader = new FileReader(); 
      $(".display").append(div);  

      reader.onload = function(e) { 
       div.append("<img id='photocount" + count + "' src='" + e.target.result + "' style='height:40px;width:auto;'></img>"); 
       count++; 
      }; 

      reader.readAsDataURL(f); 
     }()); 
    } 
}

這裏也有小提琴：https://jsfiddle.net/L3d1L9t3/1/

此JavaScript代碼在這裏確保圖像順序出現。但是，圖像的ID仍然不正確。例如，如果上傳4張圖像，則ID應分別爲光電0，光電1，光電2，光電3。但是，當我檢查每個圖像上的元素時，情況並非如此。

我如何確保「計數」的順序？這很重要，因爲我需要將計數與文本字段（圖像描述）相匹配[「圖像1」與「圖像描述1」配對，「圖像2」與「圖像描述2」配對，等等]

來源

2016-11-26 Louis.L

使用URL.createObjectURL(file)，而不是它的速度更快，更容易，因爲它是同步 - 你不必編碼/解碼背部和要塞/從的base64然後

$("#uploadfiles").change(function() { 
    // imgpreview(document.getElementById('uploadfiles').files); <-- not needed 
    imgpreview(this.files) 
}) 

function imgpreview(files) { 
    var url, div, len = files.length 
    var $display = $(".display") 

    for (var i = 0; i < len; i++) { 
    url = URL.createObjectURL(files[i]) 
    div = $('<div>') 
    $display.append(div) 
    div.append("<img id='photocount" + i + "' src=" + url + " style='height:40px;width:auto'>") 
    } 
}

來源

2016-11-27 01:38:26 Endless

以與用戶輸入相同的順序多次上傳圖像

回答

相關問題