解析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的内存泄漏
Mar 04 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
Jun 16 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 Javascript
angularjs+bootstrap菜单的使用示例代码
Mar 07 Javascript
js和jquery中获取非行间样式
May 05 jQuery
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 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生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
改版了网上的一个js操作userdata
2007/04/27 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
基于JavaScript实现移动端无限加载分页
2017/03/27 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
JavaScript生成简单等差数列
2017/11/28 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
Python检测网络延迟的代码
2018/05/15 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
基于python实现把图片转换成素描
2019/11/13 Python
vue常用指令代码实例总结
2020/03/16 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
介绍一下木马病毒的种类
2015/07/26 面试题
opencv实现图像几何变换
2021/03/24 Python
市场推广策划方案
2014/06/02 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
教师四风问题整改措施
2014/09/25 职场文书
幼儿园中班教学反思
2016/03/03 职场文书