Question

目前我有一个有效的DropzoneJS实现，用户可以选择多个图像并上传它们。实际上有一个参数 parallelUploads 可以确定一次可以上传多少图像，例如当用户选择10个文件时打开选择文件对话框，但parallelUploads:5只会前5张图片成功上传，其余5张将被忽略，这5张图片将通过一个HTTP POST请求发送。

我希望能够做的是配置它，以便上传的图像数量没有限制，但是它们是批量上传的。例如，如果用户选择30个图像，我希望它们都能成功上传，每个HTTP POST请求使用1个图像，或者每个HTTP POST使用一个定义的数字，例如5.如果我设置parallelUploads:30，那么服务器需要大量内存才能一次性尝试对30张图像进行服务器端处理，这似乎不是一个很好的解决方案。

如何配置它以便为每个图像或一次只为一定数量的图像启动单独的HTTP POST请求，而不会限制用户在一个操作中上传的图像数量？

<link rel="stylesheet" type="text/css" href="dropzone.css" media="all" />
<script type="text/javascript" src="dropzone.min.js"></script>

<div id="pnlPhotoThumbnails"></div>
<div class="clearfix">
  <form id="frmUpload" method="post" enctype="multipart/form-data"
        action="photo-upload.json" class="dropzone">
    <input type="file" name="photo" id="photo" />
  </form>
</div>

<style type="text/css">
#frmUpload input[type=file]{display:block;height:0;width:0;}
</style>

<script type="text/javascript">
function RefreshPhotos(){ $('pnlPhotoThumbnails').load('photo-thumbnails.php'); }
$(function(){
  $('frmUpload').dropzone({
    acceptedFiles: '.jpg',
    parallelUploads: 5,
    init:function(){
      var hDropzone = this;
      this.on('success', function(){ RefreshPhotos(); hDropzone.removeAllFiles(); });
    }
  });
});
</script>

注意：上面是一个类似于我的实现的示例代码，虽然我已经编辑了一些以使问题一般而不是特定于我的项目，并希望有足够的代码来了解它是如何工作的，所以请记住它不完整和功能只是这个片段！ photo-upload.json将是一个服务器端脚本来处理文件上传并返回JSON成功/错误响应，photo-thumbnails.php将为每个照片缩略图返回带有<img/>标签的HTML。

Answer 1

事实证明，以下配置将解决此问题，在此特定情况下，它将允许在一个用户操作中上载最多100个文件，但每个图像上载都有单独的HTTP POST请求。

从DropzoneJS版本4.0开始，如果设置允许上传的文件数量一次转到无限，或者定义要批量合并的多个图像，它们要么全部一起上传，要么全部单独上传：

parallelUploads: 100,
uploadMultiple: false

使用DropzoneJS

1 个答案: