博客

最近的一个项目需要进行报表文件上传，经过查找资料，实现了这个功能，前端使用了表单的formData对象，后台使用的是Java，支持多文件上传。

formData对象介绍详见 ：

https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

具体实现：

1、html:

<form id="upform">  
	<input type="file" name="uploadFile" id="uploadFile" accept=".rpx,.sht" multiple/>
</form>
<button type="submit" class="btn btn-primary" id="upload_ok">上传</button>

2、js：

$("#upload_ok").unbind().click(function(){
    var form = new FormData(document.getElementById("upform"));  
	$.ajax({
		url : "${contextPath}/sys/dash/uploadDash", 
		type : 'POST',
		data:form,
		async: false,  
		cache: false, 
		processData:false,
		contentType:false,
		success:function(res){ 
				 var result=eval('('+res+')');
				 if(result.uploadFlag){
						alert("上传成功 ！！"); 
                 }	    
		},
		error:function(e){
				 alert("上传失败 ！！"); 
		}
	});  
    		 
})

3、java处理：

//上传报表
@RequestMapping(value = {"/uploadDash"})
public void uploadDash(HttpServletRequest request, HttpServletResponse response, 
    @RequestParam(value = "uploadFile", required = false)  MultipartFile[]  uploadFiles) throws IOException { 
	Map<String,Object> resultMap=new HashMap <String, Object>();  
  	for(int i=0;i<uploadFiles.length;i++) {//支持上传多文件，所以使用循环
		String fileName = uploadFiles[i].getOriginalFilename ();//获取文件上传的名称 
		try{ 
		    String uploadPath=request.getRealPath("/WEB-INF/reportFiles/")+uploadFilePath;//上传至服务器目录
		    File files=new File(uploadPath,fileName);
		    if(!files.exists ()){
		         files.mkdirs ();
		    }
		    uploadFiles[i].transferTo (files); 
		 }catch (Exception e){
		         resultMap.put("uploadFlag",false); 
		 } 
  	 } 
        resultMap.put("uploadFlag",true);
        String json=JSONObject.fromObject (resultMap).toString ();
        writeJSON(response,json); 
}   

大致代码就是这些了，仅供参考~