关于ajaxfileupload.js插件及其多上传的使用
2015-10-22 13:58
531 查看
关于ajaxfileupload.js插件的使用
众所周知,jsp中是无法使用ajax进行上传操作的,其实ajaxfileupload.js插件的使用也不过就是封装好的iframe,但是确实为我们的上传提供了很大的便利。这里是ajaxfileupload插件的下载地址
ajaxfileupload.js的原生插件,只支持单上传,如果我们想要让他支持多上传,需要对插件的内部进行一个小小的改动。
代码块
原来未改动之前,例如:[code]var oldElement = jQuery('#' + fileElementId); var newElement = jQuery(oldElement).clone(); jQuery(oldElement).attr('id', fileId); jQuery(oldElement).before(newElement); jQuery(oldElement).appendTo(form);
改动之后,也就是我们给他添加了一个循环,让他支持了多上传
[code]for(var i in fileElementId){ var oldElement = jQuery('#' + fileElementId[i]); var newElement = jQuery(oldElement).clone(); jQuery(oldElement).attr('id', fileId); jQuery(oldElement).before(newElement); jQuery(oldElement).appendTo(form); }
下面我们讲解下ajaxfileupload的简单实用
[code]function uploadMethod(){ $.ajaxFileUpload({ url : "<%=request.getContextPath()%>/user/uploadMethod.do", secureuri : false, //fileElementId:'uploadfile1',//原单上传使用方法 fileElementId :['uploadfile1','uploadfile2','uploadfile3','uploadfile4','uploadfile5'] //传入需要上传的多个file的id即可 dataType : 'json', success : function(data) { var data1=eval("("+data+")"); if (data1.result == 0) { alert(data1.resultdata); } else { alert("上传失败!"); } } }); } <input type='file' name='uploadfile' id='uploadId1'/> <input type='file' name='uploadfile' id='uploadId2'/> <input type='file' name='uploadfile' id='uploadId3'/> <input type='file' name='uploadfile' id='uploadId4'/> <input type='file' name='uploadfile' id='uploadId5'/>
后台的接收
[code]@RequestMapping("/uploadMethod") @ResponseBody public String uploadFileMethod(@RequestParam(value="uploadfile",required=false,defaultValue="") MultipartFile[] uploadfile, HttpServletRequest request, Model model){ //使用MultipartFile数组来接受多个被上传的文件 String path = request.getSession().getServletContext().getRealPath("upload"); //我们先获取到upload文件夹的路径 for(MultipartFile m:uploadfile){ if(m!=null){ String fileName = m.getOriginalFilename(); File file=new File(path); String[] fileNames=fileName.split("\\.");//获取上传文件后缀 String NfName=System.currentTimeMillis()+"."+fileNames[fileNames.length-1];//修改上传文件名称 System.out.println(path); File targetFile = new File(path, fileName); if(!targetFile.exists()){ targetFile.mkdirs(); } //保存 try { m.transferTo(targetFile); //拷贝上传的文件 System.out.println(request.getContextPath()+"/upload/"+fileName); //保存路径 model.addAttribute("filepath", request.getContextPath()+"/upload"); } catch (Exception e) { e.printStackTrace(); } } } return "{\"result\":0,\"resultdata\":\"上传成功\"}";//返回json格式的反馈信息 }
至此,简单的ajaxfileupload的多上传就完成了。
相关文章推荐
- JSTL判断list的size()大小
- IntelliJ IDEA 添加对 Extjs6 支持
- js json数据的处理
- JavaScript中为何需要用var来申明变量
- JavaScript for...in 语句
- [转]数据类型和Json格式
- js 格式化时间日期函数小结3
- js 格式化时间日期函数小结2
- js 格式化时间日期函数小结
- AnglarJS初步学习
- <jsp:forward page="hello.htm" />与response.sendRedirect("hello.htm")跳转
- 浅析JavaScript 调试方法和技巧
- js版根据经纬度计算多边形面积(墨卡托投影)
- 常用的JS数据类型转换方法
- JS运算优先级
- Loadrunner模拟JSON接口请求进行测试
- js confirm 删除提示
- 最全js表单验证
- JSP页面文件中base标记用法实例分析
- js事件绑定--支持匿名函数解除绑定