Ajax上传文件,前端数据获取,SpringMVC后台数据接收
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配置
<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表单提交
方法2:使用采用了FormData的传输方式
formData使用参考手册：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/FormData
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 createArticle(HttpServletRequest request,
@RequestParam(value="file") CommonsMultipartFile file,
@RequestParam(value = "username") String username,
@RequestParam(value = "age") String age,
@RequestParam(value = "phoneNumber") String phoneNumber
) {
//返回信息集合
Map resultMap = new HashMap();
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;
}