当前位置: 代码迷 >> JavaScript >> Dropzone JS未通过ie9中的验证
  详细解决方案

Dropzone JS未通过ie9中的验证

热度:31   发布时间:2023-06-08 09:34:40.0

我们目前正在尝试为文件上传和详细信息设置一个表单提交,并且该表单在现代浏览器中非常有效,不幸的是,对于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>

这是有意的。

浏览器支持

Chrome 7+

Firefox 4+

IE 10以上

Opera 12+(由于Mac OS的API有错误,因此版本12已被禁用)

Safari 6+

对于所有其他浏览器,dropzone提供了一个老式的文件输入回退。

在较旧的浏览器中没有拖放的解决方法-完全不支持。 图像预览等也是如此。但是使用dropzone,使用旧浏览器的用户将可以上传文件。 看起来和感觉都不会很好。 嘿,那是他们的错。

旧的学校文件输入没有验证,并且Dropzone的脚本不会触发,因为它甚至没有使用ajax提交或其他函数。 您实际上是在提交表单。 您还需要在服务器端进行检查,以提高安全性。