javascript - 禁用 jQuery 文件上传的拖放功能

Question

我在我的页面上使用ajax文件 uploader 。 https://github.com/blueimp/jQuery-File-Upload

我使用一个控件进行图像上传，使用另一个控件进行文件上传，并且两者位于同一页面上。

我添加了验证来检查两个文件 uploader 中的文件类型，但是当我将简历拖放到文件 uploader 上时，它将捕获图像 uploader 事件。

我想禁用图像 uploader 的拖放功能，这样当我拖动简历时它就不会触发。

这是我的代码，

$(function () {

        var userId = $("#CandidateProfile_user_id").val();    
        var url = 'index.php?r=fileUpload/uploadResume';
        $('#resumeUpload').fileupload({
            add: function(e, data) {
                var uploadErrors = [];
                var acceptFileTypes = /^document\/(doc|docx)$/i;

                var fileName = data.originalFiles[0].name;
                var fileExtension = fileName.split('.')[1];

                if(fileExtension.toLowerCase() != "doc" && fileExtension.toLowerCase() != "docx") {
                      uploadErrors.push('Not an accepted file type');
                }
//                if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
//                    uploadErrors.push('Not an accepted file type');
//                }
                if(data.originalFiles[0]['size'].length && data.originalFiles[0]['size'] > 5000000) {
                    uploadErrors.push('Filesize is too big');
                }
                if(uploadErrors.length > 0) {
                    alert(uploadErrors.join("\n"));
                } else {
                    data.submit();
                }
        },
        url: url,
        dataType: 'json',
        formData: {userId : userId},       
        done: function (e,data) {

            onFileUploaded(data.result.fileName,data.result.filePath);

            //Update the pic
           // $("#userPic").attr('src',data.result.imagePath);

            //set the image name
           // $("#CandidateProfile_image_name").val(data.result.imageName);

            //console.log(data);
        },       
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
});

谢谢，费萨尔·纳西尔

Answer 1

您可以通过将 dropZone 选项设置为 null 来禁用拖放。

$('#resumeUpload').fileupload({
    dropZone: null,
    add: function(e, data) {