form表单两种提交文档的方式

1、action路径

在form表单的action的属性直接写上Controller层接口的路径，直接点submit提交，jsp代码如下

<form id="Form1" action="${pageContext.request.contextPath}/demo/importData" method="post"  enctype="multipart/form-data">
			<h1>action路径上传文件</h1>
			<ul>
				<li>
				<input type="file" name="file">
				</li>
				<label>&nbsp;</label> 
				<li>
				<input type="submit" value="导入"/>
				</li>
			</ul>
</form>

2、ajax异步上传

点击按钮，绑定方法进行ajax上传，jsp代码如下：

<form id="FormAjax" method="post"  enctype="multipart/form-data">
			<h1>ajax异步上传文件</h1>
				<ul>
				<li>
				<input type="file" name="file">
				</li>
				<label>&nbsp;</label> 
				<li>
				<input onclick="selectData()" type="submit" value="导入"/>
				</li>
			</ul>
</form>


<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
 
function selectData(){
	var formData = new FormData($('#FormAjax')[0]);
	
    $.ajax({
          type: 'POST',
          url: '${pageContext.request.contextPath}/demo/importData',
          data: formData,
          async: false,
          cache: false,
          contentType: false,
          processData: false,
          success: function (res) {  
        	  alert("上传成功!");
          },
          error: function (returndata) {
        	  alert("系统出错,请重试！");
          }
     });
} 

</script>

上面的<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>，也可以在本地引入jquery.js；没有的话请求没反应，不识别$符合。

3、Controller代码

@Controller
@RequestMapping("/demo")
public class demoController {

    /**
	 * description：上传文件数据
	 * @return
	 */
	@RequestMapping(value="/importData",method=RequestMethod.POST)
	@ResponseBody
	public String importData(@RequestParam("file") MultipartFile file,HttpServletRequest request ){
		
		System.out.println("上传成功!");
		
	}
    
}

4、两种方式对比

第一种方式提交后，会改变请求路径，如下：

第二种方式提交后，请求路径不变还是原来的路径。