视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
关于ajaxFileUpload异步上传文件的使用介绍
2020-11-27 19:34:23 责编:小采
文档


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

这里就简单介绍下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; 
 } 
 
}

下载本文
显示全文
专题