单独的文件上传和普通字段的上传还是有区别的。这里主要列举它们在一个表单中提交的两种处理方式,一种直接点击提交按钮表单提交,另外一种点击通过js提交。
在作比较之前,先贴下controller代码
@ResponseBody @RequestMapping("upload") public boolean upload(User user,MultipartRequest mreq){ System.out.println("user:"+user.toString()); MultipartFile mfile=mreq.getFile("file"); System.out.println("文件是否为空:"+mfile.isEmpty()); return true; }
1. 点击按钮,表单提交
1.1 jsp页面表单代码如下
表单提交 <form action="ProjectFormMvn/user/upload" enctype="multipart/form-data" method="post"> 名称:<input type="text" name="account" /><br/> 文件:<input type="file" name="file"/><br/> <input type="button" value="提交"/> </form>
1.2 点击提交
通过控制台可以看到,controller已经正常接到值了。
2.通过js提交
2.1 jsp页面代码如下
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> function clickMe(){ var form=document.getElementById("MyForm"), formData=new FormData(form); $.ajax({ url:'/ProjectForMvn/user/upload', type:'POST', data:formData, processData:false, contentType:false, success:function(data){ alert(data); } }) } </script> js提交 <form action="###" enctype="multipart/form-data" method="post" id="MyForm"> 名称:<input type="text" name="account" /><br/> 文件:<input type="file" name="file"/><br/> <input type="button" onclick="clickMe();" value="提交"/> </form>
2.2 点击提交
js中ajax提交方式千千万,这里只介绍这一个,主要涉及到FormData的应用。