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（由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）仅称为对象。

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

1 个答案: