相关疑难解决方法(0)

的XMLHttpRequest的2级标准(还是工作草案)定义FormData的接口.此接口允许将File对象附加到XHR请求(Ajax请求).

顺便说一句,这是一个新功能 - 在过去,使用了"隐藏iframe技巧"(在我的另一个问题中阅读).

这就是它的工作原理(例子):

var xhr = new XMLHttpRequest(),
    fd = new FormData();

fd.append( 'file', input.files[0] );
xhr.open( 'POST', 'http://example.com/script.php', true );
xhr.onreadystatechange = handler;
xhr.send( fd );

where input是一个<input type="file">字段,handler是Ajax请求的成功处理程序.

这在所有浏览器中都很漂亮(除了IE之外).

现在,我想使这个功能与jQuery一起使用.我试过这个:

var fd = new FormData();    
fd.append( 'file', input.files[0] );

$.post( 'http://example.com/script.php', fd, handler );

不幸的是,这不起作用(抛出"非法调用"错误 - 截图在这里).我假设jQuery需要一个表示form-field-names/values的简单键值对象,而FormData我传入的实例显然是不兼容的.

现在,由于可以将FormData实例传入xhr.send(),我希望它也可以使它与jQuery一起使用.

更新:

我在jQuery的Bug Tracker上创建了一个"功能票".它在这里:http://bugs.jquery.com/ticket/9995

我被建议使用"Ajax prefilter"...... …

我不知道为什么我不能让jQuery传递上传数据,因为AJAX对象似乎配置正确,并且正在发送正确的Content-Type/MIME-Type标头.

我尝试了两种不同形式的请求 - 一种是在文字中包含FormData对象,另一种是直接传递FormData对象.

不幸的是,无论哪种方式我都无法通过,$ _FILES和$ _POST都是空数组.

我想要使​​用的理想要求如下:

以下代码:

var files = new FormData();

$.each(context.prototype.fileData, function(i, obj) { files.append(i, obj.value.files[0]); });

var request = { action: 'upload', id: response.obj.id, data: files };

$.ajax({

    type        : 'POST',
    url         : context.controller,
    data        : request,
    processData : false,
    contentType : 'multipart/form-data',
    mimeType    : 'multipart/form-data',

    success     : function(r) {
        console.log(r);
        //if (errors != null) { } else context.close();

    },

    error       : function(r) { alert('jQuery Error'); }

});

当我尝试导出$ _FILES和$ _POST时,唯一的响应(查看网络选项卡和控制台)只是两个空数组......