jQuery fileupload with drag& drop提交空文件输入

时间:2014-07-24 09:47:27

标签: javascript jquery file-upload

我正在使用jQuery fileupload插件,它通过单击文件输入并通过浏览器的对话框选择上传文件时效果很好。

然而,当使用drag& drop,它似乎提交了一个空文件输入

------WebKitFormBoundaryCA4VuYwsPr7h4ItR
Content-Disposition: form-data; name="attachment"; filename=""
Content-Type: application/octet-stream

尽管fileupload的add callback中的数据对象在调用data.submit()之前确实有一个文件

files: Array[1]
  0: File
    lastModifiedDate: Tue Mar 18 2014 13:29:07 GMT+0100 (CET)
    name: "17_1395143728_0.png"
    size: 13542
    tempID: 1
    type: "image/png"
    webkitRelativePath: ""
    __proto__: File
  length: 1

有谁知道为什么会这样?

编辑:代码:

$(document).bind('drop.fileUpload', function (e) {
    if(jQuery(e.target).attr('id') !== 'dropZone'){
        return;
    }

    var fileInput = jQuery('#attachment');
    var files = e.originalEvent.dataTransfer.files;

    if (fileInput.length && files.length) {
        jQuery('#dropZone').hide();
        fileInput.fileupload('add', {files: files});

        e.preventDefault();
    }
});

jQuery('.js_toggleFileupload').fileupload({
    autoUpload: true,
    forceIframeTransport: true,
    progressInterval: 50,
    url: '/xhr',
    add: function (e, data) {

        console.debug(data); // this is where the data object has files

        var jqXHR = data.submit().done(function (e, data) { // this is where an empty file input is submitted
            //stuff happens here
        }
    }
}); 

1 个答案:

答案 0 :(得分:0)

d'哦!问题是使用iframeTransport并拖动&同时删除,因为iframeTransport选项将文件输入发布到iframe,所以无法工作。在阻力和阻力的情况下drop,文件输入有一个空值。

我已关闭forceIframeTransport选项,现在可以正常使用。