解析ajaxFileUpload 异步上传文件简单使用

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

首先是jsp部分：

rush:xhtml;">

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

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

$.ajaxFileUpload({  
  url:'supplyDataReportUploadExcel',//url自己写  
  secureuri:false,//这个是啥没啥用 
  type:'post',fileElementId:'fil<a href="https://www.jb51.cc/tag/eto/" target="_blank" class="keywords">eto</a>Upload',//file<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>的id  
  dataType: 'json',//返回数据的类型  
  //data:{name:'logan'},//一同<a href="https://www.jb51.cc/tag/shangchuan/" target="_blank" class="keywords">上传</a>的数据  
  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如下：

rush:js;">

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

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

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.writeValueA<a href="https://www.jb51.cc/tag/sst/" target="_blank" class="keywords">sst</a>ring(json); 
    return jsonStr; 
  } 
  //<a href="https://www.jb51.cc/tag/shangchuan/" target="_blank" class="keywords">上传</a><a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a> 
  UploadUtil.SaveFileFromInputStream(n_file.getInputStream(),"D:/补数据报表<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>",n_file.g<a href="https://www.jb51.cc/tag/eto/" target="_blank" class="keywords">eto</a>riginalFilename()); 
  InputStream is2 = new FileInputStream("D:/补数据报表<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>/"+n_file.g<a href="https://www.jb51.cc/tag/eto/" target="_blank" class="keywords">eto</a>riginalFilename()); 

  //读取<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>进行<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>验证 
  ExcelReader excelReader = new ExcelReader(); 

  Map<Integer,SupplyDataReportBackVo> supplyDataReportBackVos = new HashMap<Integer,SupplyDataReportBackVo>(); 


  String jsonStr = excelReader.readExcelContent(is2,supplyDataReportBackVos,json,n_file); 
  //判断 readExcelContent()解析Excel<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a> 是否符合规范 如果符合 <a href="https://www.jb51.cc/tag/xiugai/" target="_blank" class="keywords">修改</a>相应数据  
  if(json.isSuccess()==true){ 
     //遍历map 用value --》SupplyDataReportBackVo <a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>  updateById<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a> 
    for(SupplyDataReportBackVo supplyDataReportBackVo : supplyDataReportBackVos.values()){ 
      supplyDataReportService.updateById(supplyDataReportBackVo); 
    } 

    Sy<a href="https://www.jb51.cc/tag/stem/" target="_blank" class="keywords">stem</a>.out.println("获得Excel表格的<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>:"); 
    for (int i = 1; i <= supplyDataReportBackVos.size(); i++) { 

      Sy<a href="https://www.jb51.cc/tag/stem/" target="_blank" class="keywords">stem</a>.out.println(supplyDataReportBackVos.get(i)); 
    } 
    //保存<a href="https://www.jb51.cc/tag/shangchuan/" target="_blank" class="keywords">上传</a>记录 
    uploadFormBackVo.setFormName(n_file.g<a href="https://www.jb51.cc/tag/eto/" target="_blank" class="keywords">eto</a>riginalFilename()); 
    uploadFormBackVo.setUploadTime(new Date()); 
    uploadFormBackVo.setIfsuccess("<a href="https://www.jb51.cc/tag/shangchuan/" target="_blank" class="keywords">上传</a>成功"); 
    supplyDataReportService.insert(uploadFormBackVo); 
    return jsonStr; 
  } 
  // 解析Excel <a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a> 中  有空值 保存这次<a href="https://www.jb51.cc/tag/shangchuan/" target="_blank" class="keywords">上传</a>的记录且<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>已<a href="https://www.jb51.cc/tag/shangchuan/" target="_blank" class="keywords">上传</a>的Excel<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>， <a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>已<a href="https://www.jb51.cc/tag/shangchuan/" target="_blank" class="keywords">上传</a>的Excel<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>已在 readExcelContent()中处理 
  uploadFormBackVo.setFormName(n_file.g<a href="https://www.jb51.cc/tag/eto/" target="_blank" class="keywords">eto</a>riginalFilename()); 
  uploadFormBackVo.setUploadTime(new Date()); 
  uploadFormBackVo.setIfsuccess("<a href="https://www.jb51.cc/tag/shangchuan/" target="_blank" class="keywords">上传</a>失败，Excel中有空值！！！"); 
  supplyDataReportService.insert(uploadFormBackVo); 
  return jsonStr; 
} catch (IOException e){ 
  Sy<a href="https://www.jb51.cc/tag/stem/" target="_blank" class="keywords">stem</a>.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中的标签中name属性对应。第三要注意返回值Sting上的一个注解@ResponseBody，剩下两个需要注意的地方就是AjaxJson，ObjectMapper。

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

rush:js;"> 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 使用流程，欢迎探讨！也希望大家多多支持编程之家。

ajax ajaxfileupload fileupload 异步异步上传

解析ajaxFileUpload 异步上传文件简单使用

相关文章