web-dev-qa-db-ja.com

dropzone js onclick submit file upload

ボタンを1回クリックするだけですべてのファイルをアップロードします。
HTML：

<button id="submit-all">Submit all files</button>
<form action="/target" class="dropzone" id="my-dropzone"></form>

JS：

Dropzone.options.myDropzone = {

  // Prevents Dropzone from uploading dropped files immediately
  autoProcessQueue: false,

  init: function() {
    var submitButton = document.querySelector("#submit-all")
        myDropzone = this; // closure

    submitButton.addEventListener("click", function() {
      myDropzone.processQueue(); // Tell Dropzone to process all queued files.
    });

    // You might want to show the submit button only when 
    // files are dropped here:
    this.on("addedfile", function() {
      // Show submit button here and/or inform user to click it.
    });

  }
};

ただし、ファイルはドラッグアンドドロップ後にアップロードされます。

javascriptdropzone.js
27
Steve Bals

シンプルなコードを使用する

Dropzone.autoDiscover = false;

var myDropzone = new Dropzone(element, {
  url: "/upload.php",                        
  autoProcessQueue: false,
});

$('#imgsubbutt').click(function(){           
  myDropzone.processQueue();
});
48
Behnam Mohammadi

ドロップゾーンをフォームではなくdivに配置することでこれを達成し、ドロップゾーンが特定のURLへのアップロードを自動的にPOSTする機能を削除しました。作成時にドロップゾーンインスタンスに渡したURLは、呼び出されないため、文字通り「ダミー」です。たとえば、HTML

<button id="submit-all">Submit all files</button>
<div class="dropzone" id="my-dropzone"></div>

JavaScript

$('#submit-all').on('click', function() {
    var files = $('#my-dropzone').get(0).dropzone.getAcceptedFiles();
    // Do something with the files.
});
18
eeuser

ここで、遅延アップロードを実装する方法（たとえば、ボタンをクリックすることで開始されます）：

ドロップゾーンの実装

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で収集します。後で、追加したファイルをアップロードする準備ができたら、dict doneのすべてのファイルのすべてのaddedFilesHash関数を繰り返して、進行状況バーなどでアップロードの進行状況を開始します。

3
dikkini

自分でこれをいじり終えたばかりです。アップロードと同時に、画像に関する情報をデータベースに追加したかったのです。ファイルをドロップすると、追加情報の入力フォームが開き、フォームボタンが押された後にキューを送信する必要があります。

最後に、init 'on add file'関数イベント内にjqueryクリックイベントハンドラを配置することでこれを達成しました。

this.on("addedfile", function(file){
  var myDropzone = this;
  $('#imageinfoCont').animate({left:'4.5%'});//brings form in
  $('#imgsubbutt').click(function(){
    $('#imageinfoCont').animate({left:'-10000px'}); //hides the form again
    myDropzone.processQueue(); //processes the queue
  });
});

次に、別の「送信時」関数イベントに追加データを追加します（おそらく上記のコードでそれを行うことができますが、私は思うに赤ん坊のステップ）。

魅力のように動作するようです。

2
Russell Hepworth

これは回答されましたが、特定の種類のファイルである場合にのみキューを送信したい状況に陥りました。私が遭遇したバグは、processQueueを無視していたことです。

  this.dropzone = new Dropzone('#my-dropzone', {
    autoProcessQueue: false,
  });
  return this.dropzone.on('addedfile', (function(_this) {
    return function(file) {

      var IMAGE_EXTENSIONS, ext;
      IMAGE_EXTENSIONS = 'png jpg jpeg gif'.split(' ');
      ext = (_.last(file.name.split('.'))).toLowerCase();

      if (_.include(IMAGE_EXTENSIONS, ext)) {
        return console.log('IMAGE!');
      } else {

        return setTimeout(function() { // HERE!!!!!!!!!!!!!!!!!!!!
          return _this.dropzone.processQueue();
        }, 10);
      }
    };
  })(this));

processQueueはこの方法で延期しなければ何もしないため、上記のsetTimeoutを使用する必要がありました。

1
Funkodebat