Javascript 使用JQuery按顺序预览图像

我正在尝试构建一个表单，在其中可以选择图像，然后立即预览所有图像，并在上传之前标记某些图像。使用包含文件名作为值的复选框标记图像，复选框显示在图像顶部

图像是可见的，但是它们的显示顺序似乎是随机的，因此在大多数图像上显示错误的复选框。有没有办法控制图像的显示顺序，或者将正确的复选框与正确的图像放在一起？是我当前使用的jQuery代码

$(function() {
  // Multiple images preview in browser
  var imagesPreview = function(input, placeToInsertImagePreview) {

      if (input.files) {
          var filesAmount = input.files.length;

          counter=0;

          for (i = 0; i < filesAmount; i++) {
              var reader = new FileReader();

              reader.onload = function(event) {
                  $($.parseHTML('<div class="imagewrapper" style="position:relative">'))
                  .append($($.parseHTML('<img class="parent-width">')).attr('src', event.target.result))
                  .append($($.parseHTML("<input class='imgcheckbox' name='featured[]' value='"+input.files[counter].name+"' type='checkbox'>")))
                  .appendTo(placeToInsertImagePreview);

                  counter++;
              }

              reader.readAsDataURL(input.files[i]);
          }
      }

  };

  $('#photoinput').on('change', function() {
      imagesPreview(this, '.photoaddview');
  });
});

在这个fiddle：：我所做的是使用一个LET变量，它是块范围的，这样你的迭代变量就永远不会从你正在加载的图像中去同步，我已经让你的文件加载“reader”成为一个承诺

function loadFile(file) {
    return new Promise(function(resolve, reject) {
     var reader = new FileReader();
     reader.onload = function() {
        resolve(event.target.result);
     };
     reader.readAsDataURL(file);
  })
}

var imagesPreview = function(input, placeToInsertImagePreview) {

  if (input.files) {
      var filesAmount = input.files.length;

      for (let i = 0; i < filesAmount; i++) {
        loadFile(input.files[i])
            .then(function(data) {
            $($.parseHTML('<div class="imagewrapper" style="position:relative">'))
                .append($($.parseHTML('<img class="parent-width">')).attr('src', data))
                .append($($.parseHTML("<input class='imgcheckbox' name='featured[]' value='"+input.files[i].name+"' type='checkbox'>")))
                .appendTo(placeToInsertImagePreview);
          })
      }
    }

  };

[编辑]

---

对于记录，这不会强制以正确的顺序加载图像。但是，它确实会强制选中正确图像旁边的复选框，这是因为您注意到它原来的方式存在错误。实际上，使用async/await以我创建的示例为例并按顺序加载它是相当容易的。

如何确定图像上是否放置了“错误的复选框”？你的小提琴似乎对我很管用。理论上，复选框应该是完全通用的，并且通过DOM遍历与图像相关，因此复选框的位置无关紧要。您遇到的问题是由于异步的东西。图像不一定是按顺序加载的，但是如果你认为它们是无序的，那么就把它们当作是无序的，而不是它们在input.files数组中的顺序，这是因为在加载文件时会调用onload事件处理程序，而与i或数组中的文件索引无关。