javascript - 如何获取上传的图片列表？

Question

当我点击“发送”按钮时，需要获取所有下载的文件(图片)，以便稍后将它们传输到服务器。我不知道该怎么做。

值得注意的是，点击删除图片。所以仅仅将加载的对象添加到列表中是不太可能成功的。我认为字典在 jquery 中会很有用。

$('.product_images_button').click(function() {
  $('.product_images').click()
});

function readURL(input) {
  var reader = new FileReader();

  reader.onload = function(e) {
    $('.blah').last().attr('src', e.target.result).css('width', '150px').css('opacity', '0.9');
  }

  reader.readAsDataURL(input.files[0]);
  $('.media_preview_wrap').append('<img class="blah" src="">');
  $(".product_images").val("");
}

$(".product_images").change(function() {
  readURL(this);
});

$(document).on('click', '.blah', function() {
  $(this).remove()
})

$('#id_submit').click(function() {
  var data = {
    }
  console.log(data)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="media_preview_wrap">
  <div class="addPhoto">
    <div class="addPhotoHeader">
      <button type="button" class="button product_images_button">Upload image</button>
    </div>
  </div>
</div>
<input type="file" name="image" style="display: none" required="" class="product_images" id="">
<button id="id_submit" type="button">Send</button>

Answer 1

无需重新发明轮子。

jQuery File Upload Plugin (by heyageek) 做你想做的一切，而且是最小的和耗时考验的。 (多年来我一直在成功使用它)

请注意，他有 client side 的示例代码(jQuery) 和 server (PHP)。

您需要查看 formData 和/或 dynamicFormData 功能，它们允许您在提交和发送之前收集其他数据(连同上传的文件)到您的后端处理文件。

dynamicFormData: function()
{
    //var data ="XYZ=1&ABCD=2";
    var data ={"XYZ":1,"ABCD":2};
    return data;        
}

在 js/jQuery 中，字典 (Python) 简称为对象。