SpringMVC 异步上传文件

以前都是同步实现文件上传 比较简单 使用异步的时候给卡了好久 文件一直传不到后台。 通过查找资料后得到下面的方法能够实现异步文件上传

异步文件上传主要就是先将图片上传到服务器 在将文件的地址插入到隐藏域后 整个表单提交到后台。

需要用的 jquery.form.min.js 这个js文件

关键代码如下

    <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                	      头像
                    </div>
                   <div class="aui-list-item-input"> 
                  <img id="img" src="" >
                     <!-- <div id="drop_area"></div> -->
                     <input type="file" hidden="true" name="myFile" id="myFile" onchange="addimg(this)">
                    </div>
                     <input type="hidden"  name="img" id="imgs" 
                </div>
          </li>
           <div class="aui-btn aui-btn-danger aui-margin-l-5" onclick="updates()">修改</div>

js代码

function updates() {

	//异步上传表单     
		 var option = {
		            type:'POST',
		            url:'/new/upload',
		            dataType:'json',
		            data:{
		            	 fileName : 'myFile'//myFile是上传文件的name值
		            },
		            success:function(rs){
		            //rs是后台返回的图片上传的 地址
		            		//将地址添加到表单的隐藏域中
		            	$("#imgs").val(rs.data[0]);
		            	
		            	var dates=$("#forms").serialize();
		        		console.log(dates);
		        		//提交表单
		        	$.post("/manager/updateManager",dates,function(rs){
		        		console.log(rs);
		        		alert(rs.msg);
		        	})
		            
		            }    
		        };
		       //文件上传
			 $("#forms").ajaxSubmit(option);
	
}

//预览图片
function addimg(event){
	var file = event.files[0];
	 //获取文件阅读器
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(){
        //给img的src设置图片url
       $("#img").attr("src", this.result);
    }
	
}
//点击图片触发文件上传
$('#img').click(function () {

    return $('#myFile').click(); //注意这句，主要是需要return点击事件返回值
});

后台文件上传代码

@RequestMapping(path = "/upload", produces = { "application/json;charset=utf-8" })
			@ResponseBody
			public Map<String, Object>  file(HttpServletRequest request,MultipartFile myFile) throws IllegalStateException, IOException {
			//	System.out.println("myFile="+myFile);
				Map<String, Object> map =new HashMap<String, Object>();
				//获取保存文件的真实路径
				String savePath=request.getServletContext().getRealPath("/uploads");
				
				//获取文件上传名字
				String filename =myFile.getOriginalFilename();
			//	System.out.println("filename="+filename);
				//创建File对象
				File file =new File(savePath,filename);
				//System.out.println("file"+file);
				try {
					//保存文件
					myFile.transferTo(file);
					String imgIrl=savePath+"\\"+filename;
					
					// 图片地址
					String imgUrl = request.getContextPath() + "/uploads/" + filename;
					map.put("errno", 0);
					  String[] myList = {imgUrl};
					map.put("data", myList);
					return map;
					
				} catch (Exception e) {
					// TODO: handle exception
				}
					 	
				
				return map;
					
				}

效果图