javascript - Dropzone JS 在 ie9 中未通过验证

Question

我们目前正在尝试设置一个用于文件上传和详细信息的表单提交，它在现代浏览器中工作得很好，不幸的是对于 ie9，后备没有通过任何 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>

Answer 1

这是有意的。 DropzoneJS

Browser Support

Chrome 7+

Firefox 4+

IE 10+

Opera 12+ (Version 12 for MacOS is disabled because their API is buggy)

Safari 6+

For all the other browsers, dropzone provides an oldschool file input fallback.

There is no workaround for drag’n’drop in older browsers – it simply isn’t supported. The same goes for image previews, etc… But using dropzone, your users using an old browser will be able to upload files. It just won’t look and feel great. But hey, that’s their fault.

老式的文件输入没有验证，Dropzone 的脚本不会触发，因为它甚至没有使用 ajax 提交或其他任何功能。您实际上是在提交表单。您还需要在服务器端进行检查以提高安全性。