【问题标题】:Dropzone.js - uploading only 1 file multiple times on multiple file uploadDropzone.js - 在多个文件上传时仅多次上传 1 个文件
【发布时间】:2017-11-14 13:59:03
【问题描述】:

我正在使用 Dropzone.js 提交一堆带有其他表单元素的文件,如 https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone 上突出显示的那样,但是,在拖放区中拖动多个不同的文件并提交表单时,结果发现只有一个它们已上传。我还在跟踪在我的数据库中上传的文件,并且似乎根据拖入放置区进行上传的文件数量,单个文件被上传了很多次。例如:我将 5 个具有 diff 文件名的 diff 图像拖到 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(); 

            });

          } 

        };

网络日志截图:

【问题讨论】:

  • 你能显示你的控制器端代码吗?
  • 我以为我已经在上面提供了。您是指接收文件有效负载并处理它们以进行上传的服务器端代码吗?我认为这在这里无关紧要,因为问题出现在客户端本身的某个地方,正如 Chrome 开发工具的网络日志所指出的那样,同一个文件在响应标头中的数组中被多次附加。
  • myDropzone.on("addedfile", function (file) { console.log(file); }); 检查文件是否正确上传

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


【解决方案1】:

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

paramName: 'file[]'

而不是

paramName: 'file'

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

【讨论】:

  • 你把这个放在哪里?
  • 是的,这个去哪儿了?我把它放在选项中,没有任何变化。仍然得到同样的行为。我已经在这个上面呆了 2 天了。我不想强迫我的用户一次只上传一个文件。呃
猜你喜欢
  • 1970-01-01
  • 2015-09-13
  • 2019-10-01
  • 2020-08-15
  • 2014-11-21
  • 2016-12-23
  • 1970-01-01
  • 2023-03-26
  • 2016-04-30
相关资源
最近更新 更多