我使用jQuery的ajax函数将文件发送到服务器端PHP脚本时遇到问题.可以获取文件列表$('#fileinput').attr('files')但是如何将此数据发送到服务器?使用文件输入时$_POST,服务器端php脚本上的结果array()为0(NULL).
我知道这是可能的(虽然我到目前为止还没有找到任何jQuery解决方案,只有Prototye代码(http://webreflection.blogspot.com/2009/03/safari-4-multiple-upload-with-progress.html) ).
这似乎是相对较新的,所以请不要通过XHR/Ajax提及文件上传,因为它肯定有用.
我需要Safari 5中的功能,FF和Chrome会很好但不是必需的.
我现在的代码是:
$.ajax({
url: 'php/upload.php',
data: $('#file').attr('files'),
cache: false,
contentType: 'multipart/form-data',
processData: false,
type: 'POST',
success: function(data){
alert(data);
}
});
Run Code Online (Sandbox Code Playgroud) 的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 );
Run Code Online (Sandbox Code Playgroud)
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 );
Run Code Online (Sandbox Code Playgroud)
不幸的是,这不起作用(抛出"非法调用"错误 - 截图在这里).我假设jQuery需要一个表示form-field-names/values的简单键值对象,而FormData我传入的实例显然是不兼容的.
现在,由于可以将FormData实例传入xhr.send(),我希望它也可以使它与jQuery一起使用.
更新:
我在jQuery的Bug Tracker上创建了一个"功能票".它在这里:http://bugs.jquery.com/ticket/9995
我被建议使用"Ajax prefilter"...... …
我正在尝试在标头中正确设置边界,同时使用FormData发布XmlHttpRequest:
xhr.open("POST",url);
xhr.setRequestHeader("Content-type","multipart/form-data; boundary=...");
var formData = new FormData();
formData.append("filename", inputId.files[0]);
formData.append(...);
xhr.send(formData);
Run Code Online (Sandbox Code Playgroud)
如何在此处获取请求标头中设置的边界.我看到请求被设置,边界以某种方式在请求中创建.但服务器不知道如何解释它.