Javascript dropzone js onclick提交文件上载

只需单击一个按钮即可上载所有文件。
HTML:

提交所有文件

JS:

Dropzone.options.myDropzone={
//防止Dropzone立即上载删除的文件
自动处理队列：false，
init:function（）{
var submitButton=document.querySelector（“全部提交”）
myDropzone=this；//闭包
addEventListener（“单击”，函数（）{
myDropzone.processQueue（）；//告诉Dropzone处理所有排队的文件。
});
//您可能只想在以下情况下显示“提交”按钮：
//文件将放在此处：
this.on（“addedfile”，function（））{
//在此处显示提交按钮和/或通知用户单击该按钮。
});
}
};

---

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

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

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

this.on（“addedfile”，函数（文件）{
var myDropzone=this；
$（#imageinfoCont'）.animate（{left:'4.5%}）；//引入表单
$（'#imgsubbutt'）。单击（函数（）{
$（“#imageinfoCont”）.animate（{left:'-10000px'}）；//再次隐藏窗体
myDropzone.processQueue（）；//处理队列
});
});

然后，我在一个单独的“on sending”函数事件中添加额外的数据（可能在上面的代码中完成，但我认为是小步骤）

似乎很有魅力。

使用简单的代码

Dropzone.autoDiscover=false；
var myDropzone=新的Dropzone（元素{
url:“/upload.php”，
自动处理队列：false，
});
$（'#imgsubbutt'）。单击（函数（）{
myDropzone.processQueue（）；
});

我通过将我的dropzone放在一个div中而不是一个表单中来实现这一点，从而消除了dropzone自动

将上传发布到给定URL的功能。我创建dropzone实例时传递给它的URL实际上是“dummy”，因为它永远不会被调用。例如
HTML

提交所有文件

JavaScript

$（“#全部提交”）。在（'click'，function（）上{
var files=$（“#我的dropzone”）.get（0.dropzone.getAcceptedFiles（）；
//对这些文件做些什么。
});
虽然已经回答了这个问题，但我遇到了这样一种情况：如果队列是某种类型的文件，我只想提交它。我遇到的错误是它忽略了
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));

我不得不使用上面看到的setTimeout，因为如果我不以这种方式延迟它，processQueue将不会执行任何操作。
下面是我如何实现延迟上载（例如，通过单击任何按钮启动）：

Dropzone实现

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

//获取阵列中所有上载的文件
var addedFiles=Object.keys（addedFilesHash）；
//迭代它们
对于（var i=0；i

我们重写
accept
和
removedFile
函数。在
accept
函数中，我们在dict中收集
file
对象和
done
函数，其中键为
file
，值为
done
函数。稍后，当我们准备上载添加的文件时，我们将在dict
addedFilesHash
中迭代所有文件的
done
函数，该函数使用进度条等启动上载进度。
这是一种非常干净的方法。但在这段代码之前，您错过了下面的一行。Dropzone.autoDiscover=false；如果我们不添加这个，我们将得到错误，比如“Dropzone已经附加”在
新Dropzone…
行中的
元素是什么？
gokul_uf元素对于任何被DOM元素位难倒的人来说都是DOM-jQuery默认情况下不会返回本机DOM元素，所以您需要通过添加
get（0）
这样告诉它：
$（“#myDropzone”）.get（0）
-有关更多信息，请参见此处：如果添加多个文件，则将对每个文件重新附加
click
。如果添加两个文件，则将调用myDropzone.processQueue两次。在click方法中编写
控制台.log
，并查看是否附加两次。