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


Posted in Javascript onDecember 30, 2016

这里就简单介绍下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 使用流程,欢迎探讨!也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
jQuery遍历DOM元素与节点方法详解
Apr 14 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 Javascript
JS实现的样式切换功能tableCSS实例
Dec 30 #Javascript
浅谈js script标签中的预解析
Dec 30 #Javascript
jQuery实现页面顶部下拉广告
Dec 30 #Javascript
jQuery Password Validation密码验证
Dec 30 #Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 #Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 #Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 #Javascript
You might like
PHP递归算法的详细示例分析
2013/02/19 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
phalcon框架使用指南
2016/02/23 PHP
Javascript - HTML的request类
2007/01/09 Javascript
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
python中os操作文件及文件路径实例汇总
2015/01/15 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
Python更新所有已安装包的操作
2020/02/13 Python
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
施华洛世奇意大利官网:SWAROVSKI意大利
2018/07/23 全球购物
营销主管自我评价怎么写
2013/09/19 职场文书
新员工入职感言
2014/02/01 职场文书
高三自我评价
2014/02/01 职场文书
小学生美德少年事迹
2014/02/02 职场文书
2014年班主任工作总结
2014/11/08 职场文书
2014年爱国卫生工作总结
2014/11/22 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python
如何在Python中妥善使用进度条详解
2022/04/05 Python