标签:
在使用form表单的时候上传文件+表单,会使得页面跳转,而在某些时候不希望跳转,只变化页面中的局部信息
通过查找资料,可以使用FormData进行ajax操作。
FormData介绍:XMLHttpRequest Level 2添加了一个新的接口FormData
.利用FormData对象
,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()
方法来异步的提交这个"表单".比起普通的ajax,使用FormData
的最大优点就是我们可以异步上传一个二进制文件.
<form id= "uploadForm"> <p >指定文件名: <input type="text" name="filename" value= ""/></p > <p >上传文件: <input type="file" name="file"/></ p> <input type="button" value="上传" onclick="doUpload()" /> </form>
function doUpload() { var formData = new FormData($( "#uploadForm" )[0]); // 要求使用的html对象 $.ajax({ url: ‘http://localhost:8080/cfJAX_RS/rest/file/upload‘ , type: ‘POST‘, data: formData, async: false, cache: false, contentType: false, processData: false, success: function (returndata) { alert(returndata); }, error: function (returndata) { alert(returndata); } }); }
通过上面代码就可实现ajax提交带文件的form表单信息。
FormData还可以使用纯的js方式编写。
new FormData (optional HTMLFormElement form)
form
给当前FormData对象添加一个键/值对
.
void append(DOMString name, Blob value, optional DOMString filename); void append(DOMString name, DOMString value);
name
value
filename
value
参数被指定为一个Blob
对象或者一个File
对象时,该文件名会被发送到服务器上,对于Blob
对象来说,这个值默认为"blob".标签:
原文地址:http://www.cnblogs.com/TheoryDance/p/5536406.html