通过传统的form表单提交的方式上传
<form id= "uploadForm" action= "http://localhost:8080/cfJAX_RS/rest/file/upload" method= "post" enctype ="multipart/form-data">
<h1 >测试通过Rest接口上传文件 </h1>
<p >指定文件名: <input type ="text" name="filename" /></p>
<p >上传文件: <input type ="file" name="file" /></p>
<p >关键字1: <input type ="text" name="keyword" /></p>
<p >关键字2: <input type ="text" name="keyword" /></p>
<p >关键字3: <input type ="text" name="keyword" /></p>
<input type ="submit" value="上传"/>
</form>
通过form表单上传文件,action后会执行页面跳转,但是有些时刻,不需要跳转页面,这时候需要ajax方式进行上传
AJAX方式上传
$.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);
}
});
通常我们提交时(使用submit button)时,会将表格元素的name与value组成一个queryString,提交到后台,这对jquery来说,就是serialize方法。
通过以上代码的serialize方法将form表单序列化,最后将form表单中的所有参数提交到服务器。
以上方式属于上传简单的内容,如果要上传文件,就需要使用FormData
FormData
使用FormData的优点:可以异步上传一个二进制文件
已经被大多数浏览器所支持
创建一个FormData对象
var obj = new FormData();
W3c提供三种方案来创建或者修改FormData
方案1: 创建一个空的formData对象,并且添加键值对
var obj = new FormData();
obj.append('name1','LiuYang');
方案2:取得form对象,将其作为参数传入到FormData当中
var obj = document.getElementById('form');
var objForm = new FormData(obj);
方案3: 利用form元素的getFormData方法生成
var obj = document.getElementById('form');
var objForm = obj.getFormData();
AJAX通过FormData上传文件
1. 通过form表单初始化formData对象上传文件
html代码
<form id="uploadForm" enctype="multipart/form-data">
<input id="file" type="file" name="file"/>
<button id="upload" type="button">upload</button>
</form>
js代码
$.ajax({
url: '/upload',
type: 'POST',
cache: false,
data: new FormData($('#uploadForm')[0]),
processData: false,
contentType: false
}).done(function(res) {
}).fail(function(res) {});
注意事项:
1 enctype="multipart/form-data"
2 给form表单添加id 初始化FormData,这种初始化直接将form表单里的内容全部传到服务器,也可以使用
append方法指定传输内容
3 processData 默认为false,当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data
4 contentType与form表单里的enctype有关,可以设置contentType内容取代enctype内容,详情参考链接点击打开链接
2 不通过form表单的FormData上传
html代码
<div id="uploadForm">
<input id="file" type="file"/>
<button id="upload" type="button">upload</button>
</div>
js代码
var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
url: '/upload',
type: 'POST',
cache: false,
data: formData,
processData: false,
contentType: false
}).done(function(res) {
}).fail(function(res) {});
注意事项: 注意初始化方式,直接指定了文件 $('#file')[0].files[0]