使用 JQuery 按顺序预览图像

Question

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

图像是可见的，但是它们出现的顺序似乎是随机的，因此在大多数图像上显示了错误的复选框。有没有办法控制图像出现的顺序，或者用正确的图像放置正确的复选框？这是我目前使用的 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');

  });

});