springmvc文件上传(原生)

一般文件上传都是用到ajaxFileUpload插件，但是这些插件会受很多限制，比如你不能在controller中用一个对象去接受其他正常的表单参数，这样就会造成表单自动封装失效。还有的插件不支持其他参数提交，总之用ajaxFileUpload受到的限制太多。用原生的ajax文件表单提交，它有一个缺点就是只支持fireFox还有chrome等比较高级的浏览器。但是它的优势又是明显的  接下去废话不多说。

1.首先看一下界面表单提交，因为我这边是用velocity模板引擎来做的界面，所以导入一些静态文件的方式也有所不一样，但是要达到表单提交，只需要有jquery.js还有你自己写的upload.js（这个命名最好根据业务来命名），还有就是你自己要是有css也要引进来，我这边就贴我自己的一个例子（任务积分添加）,我这边的boostrap的js和css是在外层引进的。

界面gameTaskCreate.vm

<link href="$request.contextPath/assets/css/addGood.css" rel="stylesheet" type="text/css">
<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">新增任务</h1>
    </div>
</div>

<div class="panel panel-default" style="max-width:960px;margin:auto;">
  <div class="panel-heading">请填写任务基本信息</div>
<div class="panel-body detail-wrapper">
    <form id="gametask-form" class="form" data-submit-url="$!{request.contextPath}/gametask/saved" data-success-url="$!{request.contextPath}/gametask/list" >
       	<div class="row">
            <div class="col-md-3 detail-label text-right">任务名：</div>
            <div class="col-md-4 " >
                <input class="form-control" name="taskName" id="taskName" placeholder="请输入任务名"/>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3 detail-label text-right">获得积分：</div>
            <div class="col-md-4 " >
                <input class="form-control" name="getScores" placeholder="请输入积分数量"   id="getScores" />
            </div>
        </div>
         <div class="row">
            <div class="col-md-3 detail-label text-right">任务描述：</div>
            <div class="col-md-4 " >
                <input class="form-control" name="taskDesc" id="taskDesc" placeholder="请输入任务描述"/>
            </div>
        </div>
        <div class="row">
			<div class="col-md-3 detail-label text-right">任务类型：</div>
			<div class="col-md-4 " >
	            <select name="type" id="type" class="form-control">
	                <option value="">请选择</option>
	                <option value="1">每日任务</option>
	                <option value="2">进阶任务</option>
	                <option value="3">其他任务</option>
	            </select>
	        </div>
      	</div>
        <div class="row">
        <div class="row">
            <div class="col-md-3 detail-label text-right">最高奖励次数：</div>
            <div class="col-md-4 " >
                <input class="form-control" name="maxNum" id="maxNum" placeholder="请输入最高奖励次数" />
            </div>
        </div>
   		 <div class="row">
            <div class="col-md-3 detail-label text-right">任务代码：</div>
            <div class="col-md-4 " >
                <input class="form-control" name="taskCode" id="taskCode" placeholder="请输入任务代码"/>
            </div>
        </div>        
	    <div class="col-md-3 detail-label text-right" >图片选择：</div>
	         <div class="col-md-4 " >
	           	 <input class="form-control" name="imgUrl"  type="file" size="40" maxlength="40" id="imgUploader" >  
	         </div>
	          <div class="col-md-4 " id="preview">	           	 
	         </div>
        </div>	
        <div class="row">
            <div class="col-md-3 detail-label text-right">跳转url：</div>
            <div class="col-md-4 " >
         	   <input class="form-control" name="skipUrl" id="skipUrl" placeholder="请输入跳转url"/>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3 detail-label text-right">排序字段：</div>
            <div class="col-md-4 " >
         	   <input class="form-control" name="sort" id="sort" placeholder="请输入排序字段" />
            </div>
        </div>    
        </div>
        <div class="row">
						 <div class="col-md-3 detail-label text-right">使用状态：</div>
				<div class="col-md-4 " >
	            <select name="status" id="status" class="form-control">
	                <option value="">请选择</option>
	                <option value="0">上架</option>
	                <option value="1">下架</option>
	            </select>
	        	 </div>
        </div>
          <div class="row">
             <div>
			  	<a id="submitBtn" href="javascript:void(0);" class="btn btn-primary">提交</a>
			 </div>
		</div>       
    </form>
</div>
</div>

#importJavascript("${request.contextPath}/assets/libs/underscore/1.8.3/underscore-min.js")
#importJavascript("${request.contextPath}/assets/libs/backbone/1.2.0/backbone-min.js")
#importJavascript("$request.contextPath/assets/js/**.js")

我们自己编写的js文件（create_gametask.js）

$(function() {
	
$('#submitBtn').click(function() {
	var $form = $('#gametask-form');
	var fileBannerImg=$('#imgUploader')[0].files[0];
	// 异步上传图片
	var formData = new FormData();
	formData.append('imgTempUrl', fileBannerImg);
	formData.append('taskName', $('#taskName').val());
	formData.append('getScores', $('#getScores').val());
	formData.append('taskDesc', $('#taskDesc').val());
	formData.append('maxNum', $('#maxNum').val());
	formData.append('type', $('#type').val());
	formData.append('taskCode', $('#taskCode').val());
	formData.append('skipUrl', $('#skipUrl').val());
	formData.append('sort', $('#sort').val());		
	formData.append('status', $('#status').val());		
	
	$.ajax({
		url : $form.data('submit-url'),
		type : 'post',
		dataType : 'json',
		data : formData,
		success : function(data){
			if(data=='success'){
				alert("恭喜任务添加成功！");
				window.location.href =  $form.data('success-url');
			}			
		},
		error:function(){
			alert("抱歉任务添加失败！");
		},
		contentType: false,
		processData: false
	});
});
});




//图片格式的检测
 $('#imgUploader').change(function() {
	 var filetypes=["/png","/jpg","/jpeg","/bmp","/tga","/psd","/svg"];
			var file = this.files[0];
		<span style="white-space: pre;">	</span>var type = file.type;
			for(var i =  0 ; i < filetypes.length ; i++){
			<span style="white-space: pre;">	</span>if(filetypes[i]==type.substr(type.lastIndexOf("/")).toLowerCase()){
			<span style="white-space: pre;">	</span>    console.log(file.type);
				    var reader = new FileReader();
				    reader.readAsDataURL(file);
					reader.onload = function() {
						var url = reader.result;
						console.log(url);
						$('#preview').css({
						          'background-image': 'url('+ url +')'
						  }).show();
					<span style="white-space: pre;">	</span>};
							return ;
					    }
					  }
					     alert("文件格式有誤，請重新輸入");
 					     document.getElementById("imgUploader").value="";
});
 

 //积分数量数字监控
 $("#getScores").blur(function(){
	 
	  var reg = new RegExp("^[0-9]*$");
	     var obj = document.getElementById("getScores");
	  if(!reg.test(obj.value)){
	      alert("请输入数字!");
	      document.getElementById("getScores").value="";
	  }
	 
 });
 

 
 $("#maxNum").blur(function(){
	 
	  var reg = new RegExp("^[0-9]*$");
	     var obj = document.getElementById("maxNum");
	  if(!reg.test(obj.value)){
	      alert("请输入数字!");
	      document.getElementById("maxNum").value="";
	  }
	 
});
 
 
 $("#sort").blur(function(){
	 
	  var reg = new RegExp("^[0-9]*$");
	     var obj = document.getElementById("sort");
	  if(!reg.test(obj.value)){
	      alert("请输入数字!");
	      document.getElementById("sort").value="";
	  }
	 
});</span>

我们自己编写的css文件（addGameTask.css），这边我是用来（针对）控制显示图片大小的

#preview {
    display: none;
    width: 100px;
    height: 100px;
    border: 1px solid red;
    background-size: cover;
}

我们的控制层文件，这边用的post提交，在控制层中用一个GameTask对象接受其他参数，然后文件另存，在服务器上，上传路径和显示路径不同，如果你用了代理。我这边用了代理，所以上传的路径和数据库存取的路径有所不同。

import java.io.File;
import java.io.IOException;
import java.util.Iterator;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.validation.Valid;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;



/**
 * @author 
 * @date 2015年12月03日 上午16:51:54
 */
@Controller
public class GameTaskController {
	private static Logger log = LoggerFactory.getLogger(GoodsController.class);

	@Autowired
	private GameTaskService gameTaskService;
	
	
	@Value("${upload.image.adresse}")
	private String uploadImageAdresse;
	
	@Value("${upload.image.url}")
	private String uploadImageUrl;
	
	//返回用户列表界面
	@RequestMapping(value="/gametask/list")
	public String listGameTaskInfo(Model model){
		model.addAttribute("gametaskList", gameTaskService.getGameTaskList());
		return "gametask/gametaskList";
	}
	
	
	//返回"success字串"，前端在用跳转方式跳转到list那边去
	@ResponseBody
	@RequestMapping(value="gametask/saved",method = RequestMethod.POST)
	public String saveGameTaskInfo(HttpServletRequest request,GameTask gameTask){
		
		
		CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());  
	     //判断 request 是否有文件上传,即多部分请求  
	     if(multipartResolver.isMultipart(request)){  
	         //转换成多部分request    
	         MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest)request;  
	         //取得request中的所有文件名  
	         Iterator<String> iter = multiRequest.getFileNames(); 
	         while(iter.hasNext()){  
	        	 String str = iter.next();
	        	 
	             //取得上传文件  
	             MultipartFile file = multiRequest.getFile(str);  
	             String filePath = "";
	             if(file != null){  
	            	// 重命名上传后的文件名
					 String timeString = "FINANCE"+ System.currentTimeMillis() + "";
					 String[] fileStrings= file.getOriginalFilename().split("\\.");
					 String path=uploadImageAdresse + timeString+ "." + fileStrings[1];
					 filePath = uploadImageUrl + timeString+ "." + fileStrings[1];
					 log.info("============"+path);
					 File localFile = new File(path);
	                 try {
							file.transferTo(localFile);
						} catch (IllegalStateException e) {
							log.error("图片上传失败！", e);
						} catch (IOException e) {
							log.error("图片上传失败！", e);
					}  
	                 gameTask.setImgUrl(filePath);
	             }
	         }
	     }
	    if(gameTaskService.addGameTaskInfo(gameTask)){
	    	return "success";
	    }
	    return "false";

	}
}