Dropzone.jsサーバーへのアップロードを延期するが、アップロードを開始できるようにする

Question

Dropzoneでファイルを処理することはできますか？しかし、はサーバーコードにポストするためにボタンがクリックされるまで待ちますか？

私はautoProcessQueue = falseを試していますが、これはアップロードを開始しません。私はプロセスを開始したいので（ユーザーが待つ必要はないので）、dropzone.jsにURLを直接呼び出さないでください。

$(".dropzone.song-image").each(function (i) { 
     $(this).dropzone({ 
      url: $(this).data().url, 
      addRemoveLinks: true, 
      maxFilesize: 20, 
      maxFiles: 1, 
      acceptedFiles: "image/*", 
      dictDefaultMessage: "Add cover image", 
      dictInvalidFileType: "Only images are accepted", 
      thumbnailWidth: 330, 
      thumbnailHeight: 330, 
      init: function (file) { 
       this.on("thumbnail", function (file, dataUrl) { 
        $(".dropzone.song-image .dz-image").last().find("img").attr({ width: "100%", height: "100%" }); 
       }); 
       this.on("success", function (file, response) { 
        $(this.element).siblings("input[type=hidden]").val(response.imageBytes); 
        file.previewElement.classList.add("dz-success"); 
        $(".dropzone.song-image .dz-image").css({ "width": "100%", "height": "auto" }); 
       }); 
      } 
    } 
}); 

Answer 1

私はソースコードを見ていた、とxhr.Send(form);は（あなたのURLのサーバーへの投稿は）ファイルが処理されており、その後、アップロードが開始直後に送信されます。

誰かが私より優れていることを知っていない限り、私は明らかにしたくないDropzone.jsのソースコードを変更しなければ、それは可能ではないと思います。

私は（例えば、いずれかのボタンをクリックすることにより開始）遅延アップロード実装方法ここで

Answer 2

：

ドロップゾーンの実装

var count = 0; 
var addedFilesHash = {}; 
var myDropzone = new Dropzone("#file_upload-form", { 
    paramName: "file", // The name that will be used to transfer the file 
    addRemoveLinks: true, 
    maxFilesize: 5, // MB 
    parallelUploads: 5, 
    uploadMultiple: true, 
    acceptedFiles: "image/*,.xlsx,.xls,.pdf,.doc,.docx", 
    maxFiles: 10, 
    init: function() { 
     this.on("removedfile", function (file) { 
      // delete from our dict removed file 
      delete addedFilesHash[file]; 
     }); 
    }, 
    accept: function(file, done) { 
     var _id = count++; 
     file._id = _id; 
     addedFilesHash[_id] = done; 
    } 
}); 

をどこか

// get all uploaded files in array 
    var addedFiles = Object.keys(addedFilesHash); 
    // iterate them 
    for (var i = 0; i< addedFiles.length; i++) { 
     // get file obj 
     var addedFile = addedFiles[i]; 
     // get done function 
     var doneFile = addedFilesHash[addedFile]; 
     // call done function to upload file to server 
     doneFile(); 
    } 

我々はacceptとremovedFileを上書き機能。 accept関数では、fileオブジェクトとdone関数を取ります。ここでは、キーはfileであり、値はdone関数です。後で、追加されたファイルをアップロードする準備ができたら、dict addedFilesHashのすべてのファイルに対してすべてdoneの関数を反復処理し、進行状況バーなどでアップロードの進行を開始します。