Question

我们目前正在尝试设置用于文件上传和详细信息的表单提交，并且它在现代浏览器中运行良好，不幸的是，对于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>

Answer 1

这是有意的。 DropzoneJS

浏览器支持

Chrome 7 +

Firefox 4 +

IE 10 +

Opera 12+（MacOS版本12因其API错误而被禁用）

Safari 6 +

对于所有其他浏览器，dropzone提供oldschool文件输入后备。

在旧浏览器中没有针对drag'n'drop的解决方法 - 它根本不受支持。图像预览等也是如此......但是使用dropzone，使用旧浏览器的用户将能够上传文件。它看起来和感觉都不会很棒。但是，嘿，这是他们的错。

旧学校文件输入没有验证，Dropzone的脚本不会触发，因为它甚至没有使用ajax提交的功能或任何东西。你真的在提交表格。您需要在服务器端进行检查以获得额外的安全性。

Dropzone JS没有在ie9中传递验证

1 个答案:

浏览器支持