现在的项目中需要使用到不刷新页面的方式实现上传文件,实现方法如下:
html代码:
-
文件:<input id="file" type="file" name="file"/>
-
<button id="upload">上传文件</button>
js代码:
-
$(function () {
-
$("#upload").click(function(){
-
var formData = new FormData();
-
formData.append('file', $('#file')[0].files[0]);
-
$.ajax({
-
url: "http://127.0.0.1:8081/uploadFile/addUploadFileUrl",
-
type: "POST",
-
data: formData,
-
/**
-
*必须false才会自动加上正确的Content-Type
-
*/
-
contentType: false,
-
/**
-
* 必须false才会避开jQuery对 formdata 的默认处理
-
* XMLHttpRequest会对 formdata 进行正确的处理
-
*/
-
processData: false,
-
success: function (data) {
-
alert("success");
-
},
-
error: function () {
-
alert("上传失败!");
-
}
-
});
-
})
-
});
js中有对FormData对象的使用:
1.用一些键值对来模拟一系列表单控件:即把form中所有表单元素的name和value组装成一个queryString
2.异步上传二进制文件