dropzone js onclick submit file upload

做~自己de王妃 提交于 2019-12-18 10:37:42

问题


upload all files with a single button click.
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.
    });

  }
};

But the file is upload after drag and drop..


回答1:


use simple code

Dropzone.autoDiscover = false;

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

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



回答2:


I accomplished this by placing my dropzone in a div instead of a form, thereby removing the ability for dropzone to automatically POST the uploads to a given URL. The URL I passed to the dropzone instance when I created it is literally 'dummy' since it will never be called. For example, 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.
});



回答3:


Here how i implement delayed uploading (initiated by click on any button, for an example):

Dropzone implementation

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

Somewhere else

    // 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();
    }

We override accept and removedFile functions. In accept function we collect file objects and done functions in dict where key is file and value is done function. Later in time, when we are ready to upload added files, we are iterating all done functions for all files in dict addedFilesHash which launches upload progress with progress bar and etc.




回答4:


I got just finished messing around with this myself- I wanted to add information about the image to a database at the same time as uploading it. Dropping a file opens the input form for the extra info and then the queue needs sending after the form button is pressed.

I finally achieved this by putting a jquery click event handler inside the init 'on add file' function event:

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

I am then adding the extra data in a separate 'on sending' function event (could probably do it in the above code but baby steps I think).

Seems to work like a charm.




回答5:


Although this has been answered, I ran into a situation where I only wanted to submit the queue IF it was a certain type of file. The bug I ran into was it was ignoring 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));

I had to use the setTimeout seen above because processQueue did nothing if I didn't defer it in this manner.



来源:https://stackoverflow.com/questions/21232444/dropzone-js-onclick-submit-file-upload

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!