Ajax上傳文件,前端數據獲取,SpringMVC後臺數據接收
目錄
1.需求前期準備
文件上傳下載需要的SpringMVC相關jar包:
com.springsource.org.apache.commons.fileupload-1.2.0.jar
com.springsource.org.apache.commons.io-1.4.0.jar注:可以選擇高版本jar包,不過此版本是當前比較常用的jar包.
jar包下載地址:
https://download.csdn.net/download/marksunshine/10466580
2.SpringMVC.xml配置
<!-- 配置文件上傳，如果沒有使用文件上傳可以不用配置，當然如果不配，那麼配置文件中也不必引入上傳組件包 -->
<!-- 需要apache common.fileupload jar包 -->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 默認編碼 -->
<property name="defaultEncoding" value="utf-8" />
<!-- 文件大小最大值 -->
<property name="maxUploadSize" value="10485760000" />
<!-- 內存中的最大值 -->
<property name="maxInMemorySize" value="40960" />
</bean>3.Ajax前端數據獲取
兩種方式進行數據傳輸:
方法1:直接使用form表單提交
<form id="fileForm" action="file/fileupload.action" method="post" enctype="multipart/form-data">
<input type="text" name="username">
<input type="text" name="age">
<input type="text" name="phoneNumber">
<input type="file" name="file">
<button type="submit" >保存</button>
</form>方法2:使用採用了FormData的傳輸方式
formData使用參考手冊：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormData
form表單:
<form id="fileForm" name="fileForm" action="#" onsubmit="return false" method="post" enctype="multipart/form-data">
<input type="text" name="username">
<input type="text" name="age">
<input type="text" name="phoneNumber">
<input type="file" name="file">
<button type="button" onclick="getComtent()">保存</button>
</form>數據獲取以及使用Ajax傳遞方法1:
<script type="text/javascript">
//獲取編輯內容
function getComtent() {
//用戶名
var username = document.fileForm.username.value;
//年齡
var age= document.fileForm.age.value;
//電話號碼
var phoneNumber= document.fileForm.phoneNumber.value;
//文件
var file = document.fileForm.file.files[0];
//ormData是Html5新加進來的一個類,可以模擬表單數據
var fm = new FormData();
fm.append('username', username );
fm.append('age', age);
fm.append('phoneNumber', phoneNumber);
fm.append('file', articleClass);
//進行Ajax請求
$.ajax({
//幾個參數需要注意一下
type: "POST",//方法類型
dataType: "json",//預期服務器返回的數據類型,可以不設置
url: "file/fileupload.action" ,//url
data: fm,
async: false,
cache: false,
contentType: false, //禁止設置請求類型
processData: false, //禁止jquery對DAta數據的處理,默認會處理
success: function (result) {
console.log(result);//打印服務端返回的數據(調試用)
if (result.isSuccess) {
//跳轉頁面
//window.location.href="user/personalDesk.action";
}
},
error : function() {
alert("異常！");
}
});
</script>數據獲取以及使用Ajax傳遞方法2:
<script type="text/javascript">
//獲取編輯內容
function getComtent() {
var fm = new FormData($( "#fileForm" )[0]);
//進行Ajax請求
$.ajax({
//幾個參數需要注意一下
type: "POST",//方法類型
dataType: "json",//預期服務器返回的數據類型,可以不設置
url: "file/fileupload.action" ,//url
data: fm,
async: false,
cache: false,
contentType: false, //禁止設置請求類型
processData: false, //禁止jquery對DAta數據的處理,默認會處理
success: function (result) {
console.log(result);//打印服務端返回的數據(調試用)
if (result.isSuccess) {
//跳轉頁面
//window.location.href="user/personalDesk.action";
}
},
error : function() {
alert("異常！");
}
});
</script>4.SpringMVC後端接收數據
後臺接收方式1:
@RequestMapping("/file/fileupload.action")
@ResponseBody
public Map<String,Object> createArticle(ModelMap map,HttpServletRequest request) {
//返回信息集合
Map<String,Object> resultMap = new HashMap<String, Object>();
try {
//解析請求中的數據
MultipartHttpServletRequest mpRequest = (MultipartHttpServletRequest) request;
MultipartFile file = mpRequest.getFile("file");
//上傳文件的真實名稱
String name = file.getOriginalFilename();
System.out.println("----------articleFile-name----------");
System.out.println(name);
resultMap.put("result", "操作成功");
resultMap.put("data", "");
resultMap.put("isSuccess", true);
} catch (Exception e) {
e.printStackTrace();
}
return resultMap;
}後臺接收方式2:
@RequestMapping("/file/fileupload.action")
@ResponseBody
public Map<String,Object> createArticle(HttpServletRequest request,
@RequestParam(value="file") CommonsMultipartFile file,
@RequestParam(value = "username") String username,
@RequestParam(value = "age") String age,
@RequestParam(value = "phoneNumber") String phoneNumber
) {
//返回信息集合
Map<String,Object> resultMap = new HashMap<String, Object>();
try {
System.out.println("----------Filename----------");
System.out.println(file.getOriginalFilename());
System.out.println("----------username----------");
System.out.println(username);
System.out.println("----------phoneNumber----------");
System.out.println(phoneNumber);
System.out.println("----------age----------");
System.out.println(age);
resultMap.put("result", "操作成功");
resultMap.put("data", "");
resultMap.put("isSuccess", true);
} catch (Exception e) {
e.printStackTrace();
}
return resultMap;
}