如何使用按钮上传Dropzone.js的2个以上文件

Question

我做了一个简单的表格来上传文件。 使用表单，我可以将多个文件添加到队列中。 使用特殊按钮，我可以从队列中删除文件。 但是由于某种原因，它不能以我想要的方式工作。 通过单击“卸载文件”，只有2个文件正在上载到服务器。 如果我第二次单击，则第二个文件正在上传。 所有代码都在下面。 如何通过单击一个按钮上传所有文件？ 提前致谢。

HTML：

<div class="panel panel-default">
   <div class="panel-heading">
      <strong>Прикрепить файлы</strong>
   </div>
   <div class="panel-body">
      <button type="button" class="btn btn-primary" id="add-file">
         <span class="glyphicon glyphicon-folder-close" aria-hidden="true"></span> Обзор...
      </button>
      <button type="button" class="btn btn-primary" id="upload-file">
         <span class="glyphicon glyphicon-folder-close" aria-hidden="true"></span> Загрузить
      </button>
      <ul class="list-group dropzone-previews" style="margin-top: 10px; margin-bottom: 0;"></ul>
   </div>
</div>

JS：

$(".panel").dropzone({
        url: "upload.php",
        autoProcessQueue: false,
        init: function() {
        var myDropzone = this;
            $('#upload-file').click(function() {
                myDropzone.processQueue();
            });
        },
        clickable: '#add-file',
        acceptedFiles: 'image/*,application/pdf,application/msword',
        previewsContainer: '.dropzone-previews',
        previewTemplate: '<li class="working list-group-item">' +
            '<span data-dz-name></span> <span data-dz-size></span> (<u data-dz-remove>Удалить</u>)' +
            '<div class="progress" style="margin-top: 10px; margin-bottom: 0;">' +
            '<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-dz-uploadprogress></div>' +
            '</div></li>'
    });

还有我在PHP上的服务器脚本：

<?php
$ds = DIRECTORY_SEPARATOR;
$storeFolder = 'uploads';
if (!empty($_FILES)) {
   $tempFile = $_FILES['file']['tmp_name'];
   $targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;
   $targetFile =  $targetPath. $_FILES['file']['name'];
   move_uploaded_file($tempFile,$targetFile);
}
?>

Answer 1

只需将parallelUploads的值增加到10或20即可。默认情况下，它将一次向服务器发送两个文件，因此您需要增加parallelUploads的值才能工作。

 $(".panel").dropzone({
            url: "upload.php",
            autoProcessQueue: false,
            init: function () {
                var myDropzone = this;

            },
            parallelUploads: 20,
            clickable: '#add-file',
            acceptedFiles: 'image/*,application/pdf,application/msword',
            previewsContainer: '.dropzone-previews',
            previewTemplate: '<li class="working list-group-item">' +
                    '<span data-dz-name></span> <span data-dz-size></span> (<u data-dz-remove>Удалить</u>)' +
                    '<div class="progress" style="margin-top: 10px; margin-bottom: 0;">' +
                    '<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-dz-uploadprogress></div>' +
                    '</div></li>'
        });
        $('#upload-file').click(function () {
            myDropzone.processQueue();
        });