解析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 相关文章推荐
Javascript中的delete操作符详细介绍
Jun 06 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
JS hashMap实例详解
May 26 Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
详解Vue底部导航栏组件
May 02 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
Jun 03 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 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正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
destoon数据库表说明汇总
2014/07/15 PHP
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
JS实现京东商品分类侧边栏
2020/12/11 Javascript
python 字符串格式化代码
2013/03/17 Python
Python中super关键字用法实例分析
2015/05/28 Python
Python深入06——python的内存管理详解
2016/12/07 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
python生成多个只含0,1元素的随机数组或列表的实例
2018/11/12 Python
python模拟实现斗地主发牌
2020/01/07 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
python输出数学符号实例
2020/05/11 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
护理实习自我鉴定
2013/12/14 职场文书
财产保全担保书范文
2014/04/01 职场文书
《去年的树》教学反思
2014/04/11 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
小学同学聚会感言
2015/07/30 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery
MySQL 数据类型选择原则
2021/05/27 MySQL
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
Mysql事务索引知识汇总
2022/03/17 MySQL