关于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; 
 } 
 
}