问题描述
我们目前正在尝试为文件上传和详细信息设置一个表单提交,并且该表单在现代浏览器中非常有效,不幸的是,对于ie9,回退没有通过任何dropzone验证。 我不完全确定该功能是否打算在备用时执行此操作,并且应该正确指向,但目前允许任何内容在提交时通过。
dropzone js
function fallback() {
$(".dz-message").text('Your browser does not support drag n drop uploaded. Please use the file upload field below. On submitting, please be patient while we upload your file, this can take a few minutes.');
}
//Dropzone config
Dropzone.options.WADAInsertForm = {
paramName: "regUploadLoc",
uploadMultiple: false,
autoProcessQueue: false,
maxFiles: 1,
maxFilesize: 2.2, // MB
previewsContainer: '.dropzonePrev',
clickable:'#dropzoneArea',
acceptedFiles: "application/zip,application/x-compressed,application/x-zip-compressed,application/pdf,image/jpeg,image/pjpeg",
addRemoveLinks: true,
dictDefaultMessage: "Drag'n'drop files here or click to upload your supporting documents",
dictFileTooBig: "This file is too big ({{filesize}}). File should be 2mb or less.",
forceFallback: true,
fallback: function() {
console.log("Fallback engaged");
fallback();
}, // end of fallback
init: function() {
console.log("init engaged");
var myDropzone = this;
this.element.querySelector("button[id=cmdSubmit]").addEventListener("click",function(e) {
$("button#cmdSubmit").button('Submitting');
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
this.on('complete', function () {
if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0 && validateForm() === true) {
self.location="place.asp";
}
if (validateForm() === true) {
var button = $("button#cmdSubmit");
}
if (button.text() === "Submit") {
button.text("Submitting");
} else {
button.text("Submit");
}
});
} //end of init
};//end Dropzone config
的HTML
<div class="form-group">
<label for="regUploadLoc">Supporting documents<span class="col-Orange">*</span></label>
<p class="help-block">Please upload supporting documents that may be relevant to your submission. Supporting documents must be uploaded in one zipped file<br/>(i.e. a .zip file, and be no larger in file size than 2mb)</p>
<div id="dropzoneArea">
<div class="dz-default dz-message"><span>Drag'n'drop files here or click to upload your supporting documents</span></div>
<div class="dropzonePrev"></div>
<div class="fallback">
<input type="file" id="regUploadLoc" name="regUploadLoc">
</div>
</div>
1楼
这是有意的。
浏览器支持
Chrome 7+
Firefox 4+
IE 10以上
Opera 12+(由于Mac OS的API有错误,因此版本12已被禁用)
Safari 6+
对于所有其他浏览器,dropzone提供了一个老式的文件输入回退。
在较旧的浏览器中没有拖放的解决方法-完全不支持。 图像预览等也是如此。但是使用dropzone,使用旧浏览器的用户将可以上传文件。 看起来和感觉都不会很好。 嘿,那是他们的错。
旧的学校文件输入没有验证,并且Dropzone的脚本不会触发,因为它甚至没有使用ajax提交或其他函数。 您实际上是在提交表单。 您还需要在服务器端进行检查,以提高安全性。