Dropzone.js - 在多个文件上传时多次上传1个文件

时间:2017-06-13 00:12:33

标签: javascript html file-upload dropzone.js multiple-file-upload

我正在使用Dropzone.js提交一堆包含其他表单元素的文件,如https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone所示,但是,在拖放区域中拖动多个不同的文件并提交表单时,结果表明只上传其中一个。我还跟踪上传到我的数据库中的文件,似乎根据拖放到dropzone中的文件数量进行上传,单个文件的上载次数很多次。例如:我将带有差异文件名的5个差异图像拖到dropzone中,其中一个是' sunshine.jpg',结果发现' sunshine.jpg'在数据库中记录了5次。在进一步探测中,我通过Chrome开发工具中的网络面板发现,在请求标头中的数组中只发送了多个文件。经过一段时间的故障排除,没有多大用处。任何见解都将不胜感激。

简明HTML:

<form action="" method="post" enctype="multipart/form-data" novalidate class="dropzone" id="mydropzone" name="create-form">
<div class="input-group" id="whatever">
   <div id="dropzonePreview">
        <div class="fallback">
            <input name="file" type="file" multiple />
        </div>
    </div> 
</div>
...Other form elements
<input style="margin-bottom:15px;" id="btn_main_2" type="button" name="create" value='<?php echo $create_button; ?>' class="btn btn-large btn-success">
</form>

JavaScript的:

Dropzone.options.mydropzone = { 
          url: 'Modules/global/module-fileuploads-dropzone.2.php', 
          addRemoveLinks: true,
          autoProcessQueue: false, 
          autoDiscover: false,
          paramName: 'file', 
          previewsContainer: '#dropzonePreview', 
          clickable: false, 
          uploadMultiple: true,
          parallelUploads: 100,
          maxFiles: 100,
          accept: function(file, done) {
            console.log("uploaded file");
            done();
          },
         error: function(file, msg){
            alert(msg);
          },
          init: function() {

              var myDropzone = this;

            $("#btn_main_2").on('click',function(e) {
               e.preventDefault();
               myDropzone.processQueue(); 

            });

          } 

        };

网络日志的屏幕截图:

Network Log - Request Header

1 个答案:

答案 0 :(得分:0)

在进一步的故障排除方面,我发现这个问题的解决方案非常简单:

paramName: 'file[]'

而不是

paramName: 'file'

因为在这种情况下我们正在处理一组文件。看起来在将数组指定为参数时无法忽略它。