Question

只需点击一下按钮即可上传所有文件 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.
    });

  }
};

但是文件是在拖放后上传的。

Answer 1

使用简单的代码

Dropzone.autoDiscover = false;

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

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

Answer 2

我通过将dropzone放在div而不是表单中来完成此操作，从而删除了dropzone自动POST上传到给定URL的功能。我创建它时传递给dropzone实例的URL实际上是'dummy'，因为它永远不会被调用。例如， 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.
});

Answer 3

这里我如何实现延迟上传（通过单击任何按钮启动，例如）：

Dropzone实施

product

其他地方

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函数中，我们在dict中收集accept个对象和file函数，其中键为done且值为file函数。稍后，当我们准备上传添加的文件时，我们正在迭代dict done中所有文件的所有done函数，这些函数会使用进度条等启动上传进度。

Answer 4

我刚刚完成了这个问题 - 我想在上传数据的同时将有关图像的信息添加到数据库中。删除文件会打开额外信息的输入表单，然后在按下表单按钮后需要发送队列。

我终于通过在init'on add file'函数事件中放置一个jquery click事件处理程序来实现这一点：

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

然后我在一个单独的'发送'功能事件中添加了额外的数据（可能在上面的代码中可以做到这一点，但我认为是宝贝步骤。）

似乎像魅力一样工作。

Answer 5

虽然已经回答了这个问题，但我遇到了一个我只想提交队列的情况，如果它是某种类型的文件。我遇到的错误是它忽略了2016-11-07 03:50:18。

        // This custom method takes a path 
        // and adds all files and folder names to the 'files' array
        string[] files = Utilities.FileList("C:\", "");
        // Then for each array item...
        foreach (string f in files)
        {
            // Here is the important line I used to ommit .DLL files:
            if (!f.EndsWith(".dll", StringComparison.Ordinal))
                // then populated a listBox with the array contents
                myListBox.Items.Add(f);
        }

我不得不使用上面看到的setTimeout，因为如果我没有以这种方式推迟，processQueue什么也没做。

dropzone js onclick提交文件上传

5 个答案: