为将来的读者做准备。
异步文件上传
使用HTML5
您可以使用jQuery上传文件使用FormData和File API的$.ajax()
方法(两种HTML5功能),。
您也可以发送文件 不带FormData的,但是必须以两种方式 API来处理文件,即可以使用XMLHttpRequest(Ajax)发送文件。
$.ajax({
url: 'file/destination.html',
type: 'POST',
data: new FormData($('#formWithFiles')[0]), // The form with the file inputs.
processData: false,
contentType: false // Using FormData, no need to process data.
}).done(function(){
console.log("Success: Files sent!");
}).fail(function(){
console.log("An error occurred, the files couldn't be sent!");
});
快速,纯净的JavaScript(无jQuery)示例,请参见“ 使用FormData对象发送文件 ”。
倒退
如果不支持HTML5(无File API),则唯一的其他纯JavaScript解决方案(无Flash或任何其他浏览器插件)是隐藏的iframe技术,该技术允许在不使用XMLHttpRequest对象的情况下模拟异步请求。
它包括使用文件输入将iframe设置为表单的目标。当用户提交请求并上传文件时,响应将显示在iframe中,而不是重新呈现主页。隐藏iframe可使整个过程对用户透明,并模拟异步请求。
如果做得正确,它实际上可以在任何浏览器上运行,但是在从iframe获取响应方面有一些警告。
在这种情况下,您可能更喜欢使用Bifröst之类的包装器插件,该插件使用iframe技术,但还提供了jQuery Ajax传输,允许仅使用以下方法发送文件$.ajax()
:
$.ajax({
url: 'file/destination.html',
type: 'POST',
// Set the transport to use (iframe means to use Bifröst)
// and the expected data type (json in this case).
dataType: 'iframe json',
fileInputs: $('input[type="file"]'), // The file inputs containing the files to send.
data: { msg: 'Some extra data you might need.'}
}).done(function(){
console.log("Success: Files sent!");
}).fail(function(){
console.log("An error occurred, the files couldn't be sent!");
});
外挂程式
Bifröst只是一个小的包装,它为jQuery的ajax方法添加了后备支持,但是许多上述插件,例如jQuery Form Plugin或jQuery File Upload,都包括从HTML5到不同后备的整个堆栈,以及一些简化该过程的有用功能。根据您的需求和要求,您可能需要考虑一个简单的实现或两个插件之一。