解析ajaxFileUpload 异步上传文件简单使用
这里就简单介绍下ajaxFileUpload,jQuery插件AjaxFileUpload可以实现ajax文件上传。我们的项目采用的是jsp跟js分离的架构,所以代码如下。
首先是jsp部分:
<!--<formmethod="post">--> <inputtype="file"name="n_file"id="fileToUpload"value="上传表格"/> <buttonid="upload1"class="btnbtn-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如下:
<scripttype="text/javascript">Core.js('./js/iface/upload');</script> <scripttype="text/javascript"src="libs/jquery/ajaxfileupload.js"></script>
第一段引入的upload就是上面js的内容,我们的引入js已经被封装好了,所以直接写那就行,具体结合实际情况,下面的要用到的jQuery插件AjaxFileUpload的js文件。
接下来是Controller方法如何相应:
@SuppressWarnings("resource") @RequestMapping(value="/supplyDataReportUploadExcel",method=RequestMethod.POST) public@ResponseBodyStringsupplyDataReportUploadExcel(HttpServletRequestrequest,HttpServletResponseresponse,MultipartFilen_file)throwsException{ AjaxJsonjson=newAjaxJson(); ObjectMappermapper=newObjectMapper(); UploadFormBackVouploadFormBackVo=newUploadFormBackVo(); //判断是否是空的Excel包括没有标题 if(n_file.getSize()>0){ try{ //先判断文件名是否符合规格因为不知道怎么获取上传文件的路径后期修改 //获取文件 //验证文件名 StringfileName=n_file.getOriginalFilename(); StringfileNewName=fileName.replaceAll(".xls",""); StringeL="[a-zA-Z]+[0-9]{4}-[0-9]{2}-[0-9]{2}"; Patternp=Pattern.compile(eL); Matcherm=p.matcher(fileNewName); booleandateFlag=m.matches(); if(!dateFlag){ System.out.println("格式错误"); uploadFormBackVo.setFormName(n_file.getOriginalFilename()); uploadFormBackVo.setUploadTime(newDate()); uploadFormBackVo.setIfsuccess("上传失败,Excel文件名不符合规格!!!"); supplyDataReportService.insert(uploadFormBackVo); json.setSuccess(false); json.setMsg("Excel,NameError!!!"); StringjsonStr=mapper.writeValueAsString(json); returnjsonStr; } //上传文件 UploadUtil.SaveFileFromInputStream(n_file.getInputStream(),"D:/补数据报表文件",n_file.getOriginalFilename()); InputStreamis2=newFileInputStream("D:/补数据报表文件/"+n_file.getOriginalFilename()); //读取文件进行内容验证 ExcelReaderexcelReader=newExcelReader(); Map<Integer,SupplyDataReportBackVo>supplyDataReportBackVos=newHashMap<Integer,SupplyDataReportBackVo>(); StringjsonStr=excelReader.readExcelContent(is2,supplyDataReportBackVos,json,n_file); //判断readExcelContent()解析Excel文件是否符合规范如果符合修改相应数据 if(json.isSuccess()==true){ //遍历map用value--》SupplyDataReportBackVo调用updateById方法 for(SupplyDataReportBackVosupplyDataReportBackVo:supplyDataReportBackVos.values()){ supplyDataReportService.updateById(supplyDataReportBackVo); } System.out.println("获得Excel表格的内容:"); for(inti=1;i<=supplyDataReportBackVos.size();i++){ System.out.println(supplyDataReportBackVos.get(i)); } //保存上传记录 uploadFormBackVo.setFormName(n_file.getOriginalFilename()); uploadFormBackVo.setUploadTime(newDate()); uploadFormBackVo.setIfsuccess("上传成功"); supplyDataReportService.insert(uploadFormBackVo); returnjsonStr; } //解析Excel文件中有空值保存这次上传的记录且删除已上传的Excel文件,删除已上传的Excel文件已在readExcelContent()中处理 uploadFormBackVo.setFormName(n_file.getOriginalFilename()); uploadFormBackVo.setUploadTime(newDate()); uploadFormBackVo.setIfsuccess("上传失败,Excel中有空值!!!"); supplyDataReportService.insert(uploadFormBackVo); returnjsonStr; }catch(IOExceptione){ System.out.println(e.getMessage()); } }else{ //ajax返回的数据 json.setSuccess(false); json.setMsg("UploadFileNull!!!!!"); StringjsonStr=mapper.writeValueAsString(json); returnjsonStr; } 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:
packagecom.zhongxin.web.ops.adrule.model; importjava.util.Map; publicclassAjaxJson{ privatebooleansuccess=true; privateStringmsg="ok"; privateObjectobj=null; privateMap<String,Object>attributes; publicbooleanisSuccess(){ returnsuccess; } publicvoidsetSuccess(booleansuccess){ this.success=success; } publicStringgetMsg(){ returnmsg; } publicvoidsetMsg(Stringmsg){ this.msg=msg; } publicObjectgetObj(){ returnobj; } publicvoidsetObj(Objectobj){ this.obj=obj; } publicMap<String,Object>getAttributes(){ returnattributes; } publicvoidsetAttributes(Map<String,Object>attributes){ this.attributes=attributes; } }
这就是一个简单的ajaxFileUpload使用流程,欢迎探讨!也希望大家多多支持毛票票。