使用 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');  });});