搜索
首页 电脑/网络

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

全部回答

2023-03-24

0 0

    本篇文章主要介绍了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; } }。

类似问题换一批

热点推荐

热度TOP

相关推荐
加载中...

热点搜索 换一换

电脑/网络
电脑/网络
程序设计
电脑装机
操作系统/系统故障
硬件
笔记本电脑
百度
互联网
反病毒
软件
举报
举报原因(必选):
取消确定举报