使用DropZone.js一對一上傳多個文件

Question

是否有可能使用dropzone.js逐個上傳多個文件。 以下是自定義的dropzone配置腳本。

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"
            };

現在，它一次上傳所有在進程隊列中的所有文件。 由於上傳文件的大小會更大，因此所有文件都必須一個一個地上傳。 請幫助短路。

Answer 1

我用它來一張一張地上傳文件。 希望這可以幫助。 如果您想根據自己的功能編寫完整的代碼，請告訴我。

當客戶確認文件上傳時，將調用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 -
        }
    });

Answer 2

您需要將autoProcessQueue設置為true，而parallelUploads設置為1 。

將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"
        };