dropzone js onclick提交文件上传
dropzone js onclick提交文件上传
提问于 2014-01-20 19:10:25
只需单击一次按钮即可上传所有文件。
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.
});
}
};但文件是在拖放之后上载的。
回答 5
Stack Overflow用户
发布于 2014-08-03 18:12:49
使用简单的代码
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone(element, {
url: "/upload.php",
autoProcessQueue: false,
});
$('#imgsubbutt').click(function(){
myDropzone.processQueue();
});Stack Overflow用户
发布于 2015-03-15 00:05:04
我通过将dropzone放在div而不是表单中来实现这一点，从而消除了dropzone自动将上传内容POST到给定URL的功能。我在创建dropzone实例时传递给它的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.
});Stack Overflow用户
发布于 2016-11-28 21:55:07
以下是我如何实现延迟上传(例如，通过单击任意按钮启动)：
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();
}我们覆盖accept和removedFile函数。在accept函数中，我们收集了dict中的file对象和done函数，其中key是file，value是done函数。稍后，当我们准备好上传添加的文件时，我们会迭代dict addedFilesHash中所有文件的所有done函数，它会启动带有进度条等的上传进度。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21232444
复制相关文章
相似问题