我的表单包含 dropzone.js，并使用 jQuery 插件 formvalidation.io 进行了验证。
文件上传和验证元素独立地按预期工作，但是我需要在 Dropzone 上传任何文件之前运行表单验证。
我正在尝试通过
- 配置配置 Dropzone
autoProcessQueue: false以防止文件自动上传processQueue()从表单验证 onSuccess 回调手动调用 Dropzone
所有的尝试都失败了。看来，以我有限的 javascript 知识，我无法从另一个函数中访问 Dropzone？
我确信答案在 Dropzone Issue jQuery instancing: Accessing Dropzone object #180的评论中，但我不知道如何实现这里讨论的内容。 https://github.com/enyo/dropzone/issues/180
下面的代码有注释显示我尝试调用processQueue()以及每个结果的结果。
谁能告诉我如何processQueue()正确打电话？
拖放区脚本
Dropzone.autoDiscover = false;
// Get the template HTML and remove it from the document
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
var myDropzone = new Dropzone('#drop-target', { // define specific dropzone target
url: "/processors/form-upload-files.html", // Set the url
previewTemplate: previewTemplate,
autoQueue: false, // Make sure the files aren't queued until manually enqueued
previewsContainer: "#previews", // Define the container to display the previews
clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files.
autoProcessQueue: false, // when ready to send files call myDropzone.processQueue()
uploadMultiple: true,
init: function() {
// removed for ease of reading as not relevant to the problem
}
});
Formvalidation 脚本- 下面的代码包含显示我尝试调用 processQueue() 以及每个结果的注释
$(function() {
FormValidation.formValidation(
document.getElementById('fm-contact'), {
fields: {
user_name: {
validators: {
notEmpty: {
message: 'What should we call you?'
}
}
} /* other validators removed for ease of reading */
}
}
},
}
)
/* form is valid, trigger dropzone processQueue() */
.on('core.form.valid', function() {
// call dropzone to upload files and data
// figure if files are queued
// console.log( myDropzone.getQueuedFiles() ) // returns empty array
/* console log is empty
var myDropzone = Dropzone.forElement("#drop-target");
console.log( myDropzone )
myDropzone.processQueue();
*/
/* does not process queue, no errors
$('#drop-target')[0].dropzone.processQueue();
*/
/* Error: Dropzone already attached. - even with Dropzone.autoDiscover = false; outside of jquery ready function
var dropzone1 = new Dropzone("#drop-target", { autoProcessQueue: false, uploadMultiple: true});
dropzone1.processQueue();
*/
/* TypeError: dropzone is undefined
var dropzone = $(this).get(0).dropzone;
dropzone.processQueue();
*/
/* does not process queue, no errors
var dzone = document.querySelector("#drop-target").dropzone;
dzone.processQueue();
*/
/* does not process queue, no errors
Dropzone.forElement("#drop-target").processQueue();
*/
/* does not process queue, no errors
var myDropzone = Dropzone.forElement("div#drop-target");
myDropzone.processQueue();
*/
/* ReferenceError: options is not defined
var drop = $("#drop-target").dropzone({ autoProcessQueue: false, uploadMultiple: true}).get(0).dropzone;
drop.processQueue();
*/
/* does not process queue, no errors
$('#drop-target').get(0).dropzone.processQueue();
*/
});
});