ajaxFileUpload 异步上传文件简单使用

这里就简单介绍下ajaxFileUpload，jQuery插件AjaxFileUpload可以实现ajax文件上传。我们的项目采用的是jsp跟js分离的架构，所以代码如下。

首先是jsp部分：

<!--       <form method="post"> -->
		<input type="file" name="n_file" id="fileToUpload" value="上传表格" />
               	<button id="upload1" class="btn btn-default">上传</button>
<!-- 	   </form> -->

这里说下 为什么把form注释了，因为我的jsp中已经有了另外一个form 在调试过程中发现可能有冲突就把form注释了，事实证明ajaxFileUpload 不用form表单一样可以提交，下面就是js代码部分：

$(function(){  
    //点击打开文件选择器  
    $("#upload1").on('click', function() {  
    	//选择文件之后执行上传  

        $.ajaxFileUpload({  
            url:'supplyDataReportUploadExcel', //url自己写 
            secureuri:false, //这个是啥没啥用
            type:'post',
            fileElementId:'fileToUpload',//file标签的id  
            dataType: 'json',//返回数据的类型  
            //data:{name:'logan'},//一同上传的数据  
            success: function (data, status) {  
//            	alert(data);
//            	alert(data.msg);	
//            	alert(data.success);
            	if(data.success){
            		alert("upload,success!!!");
            		window.location.href='supplyDataReport';
            	}else{
            		alert(data.msg);
            		window.location.href='supplyDataReport';
            	}
            	
            }/*,  
            error: function (data, status, e) {  
                alert(e);  
            }*/  
        });  

    });  

}); 

本人js不好，只是会用这个js不能完全copy走，要结合项目结构的实际情况，不过大体参数干什么的注释都写了。一定注意type是post跟请求对应的Controller的方法的method
=RequestMethod.POST 一致。 注意dataType:'json'  ,一定注意json的大小写。

ps：这里要说一下我用的data.success做的判断跟后面的一个实体类AjaxJson有关系，注意！！！！！

对了 jsp中还需要引入 对应的js如下：

<script type="text/javascript">Core.js('./js/iface/upload');</script>
<script  type="text/javascript" src="libs/jquery/ajaxfileupload.js"></script>

第一段引入的upload 就是上面js的内容，我们的引入js已经被封装好了，所以直接写那就行，具体结合实际情况 ，下面的要用到的jQuery插件AjaxFileUpload的js文件。

接下来是Controller方法如何相应：

	@SuppressWarnings("resource")
	@RequestMapping(value = "/supplyDataReportUploadExcel", method = RequestMethod.POST)
	public @ResponseBody String supplyDataReportUploadExcel(HttpServletRequest request, HttpServletResponse response,MultipartFile n_file) throws Exception {
		AjaxJson json = new AjaxJson();
		ObjectMapper mapper = new ObjectMapper();
		UploadFormBackVo uploadFormBackVo = new UploadFormBackVo();
		//判断是否是空的Excel  包括没有标题
		if(n_file.getSize()>0){
			try{
				//先判断 文件名 是否符合规格  因为不知道怎么获取上传文件的路径 后期修改
				//获取文件
				//验证文件名
				String fileName = n_file.getOriginalFilename();
				String fileNewName = fileName.replaceAll(".xls", "");
				String eL = "[a-zA-Z]+[0-9]{4}-[0-9]{2}-[0-9]{2}";
				Pattern p = Pattern.compile(eL);
				Matcher m = p.matcher(fileNewName);
				boolean dateFlag = m.matches();
				if (!dateFlag) {
					System.out.println("格式错误");
					uploadFormBackVo.setFormName(n_file.getOriginalFilename());
            		uploadFormBackVo.setUploadTime(new Date());
		            uploadFormBackVo.setIfsuccess("上传失败，Excel文件名不符合规格！！！");
		            supplyDataReportService.insert(uploadFormBackVo);
		            
					json.setSuccess(false);
					json.setMsg("Excel,NameError!!!");
					String jsonStr = mapper.writeValueAsString(json);
					return jsonStr;
				}
				//上传文件
				UploadUtil.SaveFileFromInputStream(n_file.getInputStream(), "D:/补数据报表文件", n_file.getOriginalFilename());
				InputStream is2 = new FileInputStream("D:/补数据报表文件/"+n_file.getOriginalFilename());
				
				//读取文件进行内容验证
	            ExcelReader excelReader = new ExcelReader();
	            
	            Map<Integer, SupplyDataReportBackVo> supplyDataReportBackVos = new HashMap<Integer, SupplyDataReportBackVo>();
	            
	            
	            String jsonStr = excelReader.readExcelContent(is2,supplyDataReportBackVos,json,n_file);
	            //判断 readExcelContent()解析Excel文件  是否符合规范  如果符合 修改相应数据 
	            if(json.isSuccess()==true){
	            	 //遍历map 用value --》SupplyDataReportBackVo 调用   updateById方法
		            for(SupplyDataReportBackVo supplyDataReportBackVo : supplyDataReportBackVos.values()){
		            	supplyDataReportService.updateById(supplyDataReportBackVo);
		            }
		            
		            System.out.println("获得Excel表格的内容:");
		            for (int i = 1; i <= supplyDataReportBackVos.size(); i++) {
		            	
		                System.out.println(supplyDataReportBackVos.get(i));
		            }
		        	//保存上传记录
					uploadFormBackVo.setFormName(n_file.getOriginalFilename());
					uploadFormBackVo.setUploadTime(new Date());
					uploadFormBackVo.setIfsuccess("上传成功");
					supplyDataReportService.insert(uploadFormBackVo);
		            return jsonStr;
	            }
	            // 解析Excel 文件 中   有空值  保存这次上传的记录且删除已上传的Excel文件， 删除已上传的Excel文件已在 readExcelContent()中处理
	            uploadFormBackVo.setFormName(n_file.getOriginalFilename());
				uploadFormBackVo.setUploadTime(new Date());
				uploadFormBackVo.setIfsuccess("上传失败，Excel中有空值！！！");
				supplyDataReportService.insert(uploadFormBackVo);
	            return jsonStr;
			} catch (IOException e){
				System.out.println(e.getMessage());
			}
		}else{
			//ajax返回的数据
			json.setSuccess(false);
			json.setMsg("Upload File Null!!!!!");
			String jsonStr = mapper.writeValueAsString(json);
			return jsonStr;
		}
		System.out.println("ajax请求成功");
		return "";
		
//		json.setMsg("upload,success!!!");
		
	}

这个方法注意几个地方就行，其他的都是楼主本人自身的业务逻辑，第一@RequestMapping中请求的方式为POST，第二传入的参数有个MultipartFile  n_file，这个n_file要跟jsp中的<input>标签中name属性对应。第三要注意返回值Sting上的一个注解@ResponseBody，剩下两个需要注意的地方就是AjaxJson，ObjectMapper。

AjaxJson是自己封装的一个model类，用来处理ajax的，至于ObjectMapper是用来转换类型的具体的自己百度或者脑补吧，楼主也紧紧限于会用。下面贴上AjaxJson：

package com.zhongxin.web.ops.adrule.model;

import java.util.Map;

public class AjaxJson {
	
	private boolean success = true;
	
	private String msg = "ok";
	
	private Object obj = null;
	
	private Map<String, Object> attributes;
	
	public boolean isSuccess() {
		return success;
	}
	public void setSuccess(boolean success) {
		this.success = success;
	}
	public String getMsg() {
		return msg;
	}
	public void setMsg(String msg) {
		this.msg = msg;
	}
	public Object getObj() {
		return obj;
	}
	public void setObj(Object obj) {
		this.obj = obj;
	}
	public Map<String, Object> getAttributes() {
		return attributes;
	}
	public void setAttributes(Map<String, Object> attributes) {
		this.attributes = attributes;
	}
	
}

这就是一个简单的ajaxFileUpload 使用流程，欢迎探讨！