0

我有一个图像文件的多次上传，我曾经面临的问题是图像与用户输入的顺序不同。例如，用户选择 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”配对，依此类推]

4

1 回答 1

0

相反，使用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-27T01:38:26.393 回答