在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说想要将控制权放在前端,或者想在前台接收支持IOS或安卓的json数据格式,这时候就需要使用ajax提交。
使用ajax实现文件上传:
--01:--导入文件上传的jar包:
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3</version>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
<version>3.3.2</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
--ajax提交form表单所以要返回json数据格式需要导入转换json的jar包
<!--转换JSON-->
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.5</version>
</dependency>
--编写文件上传的jsp中的表单,使用form提交文件上传需要使用二进制的方式传输所以不要忘了在form标签中添加:enctype="multipart/form-data"
<div style="align-items: center;align-content: center;">
<h1>文件上传</h1>
<form id="form" method="post" enctype="multipart/form-data">
<p>请选择要上传的文件:</p>
<input id="file" name="file" type="file" multiple="multiple"/>
<br>
<input id="upload" name="upload" type="button" value="上传">
</form>
</div>
--编写提交文件上传的jq的ajax
<script type="text/javascript">
$(window).ready(function () {
$("#upload").click(function () {
var formData = new FormData($("#form")[0]);//获取表单中的文件
alert(formData);
$.ajax({
url:"upload",//后台的接口地址
type:"post",//post请求方式
data:formData,//参数
cache: false,
processData: false,
contentType: false,
success:function (data) {
alert(data.newFileName);
},error:function () {
alert("操作失败~");
}
})
});
});
</script>
--在springmvc的配置文件中配置MultipartResolver用于文件上传
<!-- 配置MultipartResolver,用于上传文件 -->
<bean id = "multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="utf-8"></property>
</bean>
--编写提交文件上传的jq的ajax
@RequestMapping("/upload")
@ResponseBody
public Object upload(MultipartFile[] file, HttpSession session) {
System.out.println(file);
//获取服务器上传的文件路径
String dir = session.getServletContext().getRealPath("/upload");
System.out.println(dir);
Map<String,Object> map=new HashMap<>();
for (MultipartFile files : file){
System.out.println("文件类型:"+files.getContentType());
//获取文件名
String filename = files.getOriginalFilename();
//获取文件的后缀名
String suffix = filename.substring(filename.lastIndexOf(".") + 1);
//给需要上传的文件起别并
String newFileName=String.valueOf(System.currentTimeMillis())+"."+suffix;
System.out.println("文件名:"+newFileName);
System.out.println("文件后缀:"+suffix);
System.out.println("文件大小:"+files.getSize()/1024+"KB");
map.put("newFileName",newFileName);
//创建要保存文件的路径
File dirFile = new File(dir,filename);
if (!dirFile.exists()){
dirFile.mkdirs();
}
try {
//将文件写入创建的路径
files.transferTo(dirFile);
System.out.println("文件保存成功~");
} catch (IOException e) {
e.printStackTrace();
}
}
return map;
}
注意:
- 在常用方式中,点击的登录按钮的type为"submit"类型;
- 在常用方式中,form的action不为空;
- ajax方式中需要注意的是$.ajax方法中的参数:dataType和data