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

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) 只是称为对象。