使用DropZone.js一个接一个上传多个文件

问题描述:

是否有可能使用dropzone.js逐个上传多个文件。以下是自定义的dropzone配置脚本。使用DropZone.js一个接一个上传多个文件

Dropzone.options.myDropzone = { 
       autoProcessQueue: false, 
       parallelUploads: 10, 
       addRemoveLinks:true, 
       init: function() { 
        var submitButton = document.querySelector("#submit-all"); 
        myDropzone = this; // closure 
        submitButton.addEventListener("click", function() { 
         if(myDropzone.getQueuedFiles().length === 0) 
         { 
          alert("Please drop or select file to upload !!!"); 
         } 
         else{ 
          myDropzone.processQueue(); // Tell Dropzone to process all queued files. 
         } 
        }); 
       }, 
       url: "upload.php" 
      }; 

现在,它一次上传所有文件,这些文件都在进程队列中。由于上传文件的大小会更大,所有文件必须逐一上传。请帮助缩短。

+0

尝试设置'parallelUploads:1,'from 10; – itzmukeshy7

+0

@ itzmukeshy7:不,如果parallelUploads从10开始设置为1,它将允许只选择一个要上传的文件。其实,这不是要求。如果选择多个文件上传,则必须在队列中逐个处理文件。并非全部都在一次。 – user3113732

+0

对不起@ itzmukeshy7。我误解了这件事。现在我设置parallelUploads = 1。那么它也不像预期的那样工作。 – user3113732

我用它来逐个上传文件。 希望这有助于。 如果你想根据你的功能完整的代码让我知道。

startUpload()在客户确认上传文件时调用。

Dropzone.autoDiscover = false; 
    var myDropzone = new Dropzone("#uploadModal", { 
     url: "upload.php", 
     paramName: "file_upload", 
     maxFilesize: 1024, 
     maxFiles: 200, 
     autoProcessQueue: false 
    }); 

    function startUpload(){ 
     for (var i = 0; i < myDropzone.getAcceptedFiles().length; i++) { 
      myDropzone.processFile(myDropzone.getAcceptedFiles()[i]); 
     } 
    } 

    myDropzone.on('success', function(file, result) { 
     try { 
      result = JSON.parse(result) 
      if (!result.error) { 
       if(myDropzone.getQueuedFiles().length === 0 && myDropzone.getUploadingFiles().length === 0){ 
        $("#uploadModal"). modal('hide'); 
        myDropzone.removeAllFiles(true) ; 
       } 
      } 
      //TODO - 
     } catch (e) { 
      //TODO - 
     } 
    }); 
+1

您真正需要做的就是将autoProcessQueue设置为true,并将parallelUploads设置为1.这将实现相同的目的。 – tom

您需要设置autoProcessQueue真正parallelUploads到。

将autoProcessQueue设置为true将告诉dropzone自动处理队列。将parallelUploads设置为1会告诉dropzone仅从队列中一次上传一个文件。

Dropzone.options.myDropzone = { 
      autoProcessQueue: true, 
      parallelUploads: 1, 
      addRemoveLinks:true, 
      init: function() { 
       var submitButton = document.querySelector("#submit-all"); 
       myDropzone = this; // closure 
       submitButton.addEventListener("click", function() { 
        if(myDropzone.getQueuedFiles().length === 0) 
        { 
         alert("Please drop or select file to upload !!!"); 
        } 
        else{ 
         myDropzone.processQueue(); // Tell Dropzone to process all queued files. 
        } 
       }); 
      }, 
      url: "upload.php" 
     };