与用户输入相同的序列上上传图像

Question

我有一个用于图像文件的多上计划，我曾经面临的问题是图像作为用户输入的序列以不同的顺序出现。例如，用户选择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应分别为PhotoCount0，PhotoCount1，PhotoCount2，PhotoCount3。但是，当我在每个图像上检查元素时，情况并非如此。

我如何确保"计数"也是顺序的？这很重要，因为我还需要将计数与文本字段（图像描述）以及"图像1"与"图像描述1"，"图像2"配对与"图像描述2"等配对]

Answer 1

使用 URL.createObjectURL(file)取而代

$("#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'>")
  }
}