Ajax 上传文件
转载自：http://yunzhu.iteye.com/blog/2177923
通过传统的form表单提交的方式上传文件：
|
1
2
3
4
5
6
7
8
9
|
<
form
id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data">
<
h1
>测试通过Rest接口上传文件
<
p
>指定文件名： <
input
type ="text" name="filename" />
<
p
>上传文件： <
input
type ="file" name="file" />
<
p
>关键字1： <
input
type ="text" name="keyword" />
<
p
>关键字2： <
input
type ="text" name="keyword" />
<
p
>关键字3： <
input
type ="text" name="keyword" />
<
input
type ="submit" value="上传"/>
|
不过传统的form表单提交会导致页面刷新，但是在有些情况下，我们不希望页面被刷新，这种时候我们都是使用Ajax的方式进行请求的：
|
1
2
3
4
5
6
7
8
9
10
11
|
$.ajax({
url :
"http://localhost:8080/STS/rest/user"
,
type :
"POST"
,
data : $(
'#postForm'
).serialize(),
success :
function
(data) {
$(
'#serverResponse'
).html(data);
},
error :
function
(data) {
$(
'#serverResponse'
).html(data.status +
" : "
+ data.statusText +
" : "
+ data.responseText);
}
});
|
如上，通过$('#postForm').serialize()可以对form表单进行序列化，从而将form表单中的所有参数传递到服务端。
但是上述方式，只能传递一般的参数，上传文件的文件流是无法被序列化并传递的。
不过如今主流浏览器都开始支持一个叫做FormData的对象，有了这个FormData，我们就可以轻松地使用Ajax方式进行文件上传了。
关于FormData及其用法
FormData是什么呢？我们来看看Mozilla上的介绍。
XMLHttpRequest Level 2添加了一个新的接口
FormData.利用
FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的
send()方法来异步的提交这个"表单".比起普通的ajax,使用
FormData的最大优点就是我们可以异步上传一个二进制文件.
所有主流浏览器的较新版本都已经支持这个对象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
这里只展示一个通过from表单来初始化FormData的方式
|
1
2
3
4
5
6
7
8
9
10
11
12
|
var
oData =
new
FormData(document.forms.namedItem(
"fileinfo"
));
oData.append(
"CustomField"
,
"This is some extra data"
);
var
oReq =
new
XMLHttpRequest();
oReq.open(
"POST"
,
"stash.php"
,
true
);
oReq.onload =
function
(oEvent) {
if
(oReq.status == 200) {
oOutput.innerHTML =
"Uploaded!"
;
}
else
{
oOutput.innerHTML =
"Error "
+ oReq.status +
" occurred uploading your file.
;
}
};
oReq.send(oData);
|
参见：https://developer.mozilla.org/zh-CN/docs/Web/Guide/Using_FormData_Objects
使用FormData，进行Ajax请求并上传文件
这里使用JQuery，但是老版本的JQuery比如1.2是不支持的，最好使用2.0或更新版本：
|
1
2
3
4
5
|
<
form
id= "uploadForm">
<
p
>指定文件名： <
input
type="text" name="filename" value= ""/>
<
p
>上传文件： <
input
type="file" name="file"/>
<
input
type="button" value="上传" onclick="doUpload()" />
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
function
doUpload() {
var
formData =
new
FormData($(
"#uploadForm"
)[0]);
$.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);
}
});
}
这里要注意几点：
上传后，服务器端代码需要使用从查询参数名为 如果不是用 使用
|