关于ajaxFileUpload 异步上传文件的使用介绍

本篇文章主要介绍了ajaxfileupload 异步上传文件简单使用,jquery插件ajaxfileupload可以实现ajax文件上传。有兴趣的可以了解一下,

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

首先是jsp部分:

<!--  -->            <!--  -->

登录后复制

这里说下 为什么把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如下:

Core.js('./js/iface/upload'); 

登录后复制

第一段引入的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 supplyDataReportBackVos = new HashMap();                     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 

这个方法注意几个地方就行,其他的都是楼主本人自身的业务逻辑,第一@RequestMapping中请求的方式为POST,第二传入的参数有个MultipartFile  n_file,这个n_file要跟jsp中的标签中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 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 getAttributes() {     return attributes;   }   public void setAttributes(Map attributes) {     this.attributes = attributes;   }    }

登录后复制

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

jQuery mobile类库使用时加载导航历史的方法

Jquery ajax技术实现间隔N秒向某页面传值

以上就是关于ajaxFileUpload 异步上传文件的使用介绍的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2747470.html

(0)
上一篇 2025年3月8日 04:22:40
下一篇 2025年3月8日 04:22:46

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论