背景:我们平时在做项目的时候,肯定会遇到上传头像、图片、文件等异步上传的功能,今天就以ajaxFileupload组件上传头像为例总结一下该组件的用法。
Tips: 我在以前的博客中分享过三种上传组件,其实主要代码已经在这篇文章体现了,今天再次总结一下ajaxfileupload这个组件,发现在高版本(1.9以上)的Jquery下ajaxfileupload提示异常,然后我就把ajaxfileupload的jQuery对象都替换成了$就可使用了,对于ajaxFileUpload 报这错jQuery.handleError is not a function,请猛戳 这里,对就是这里。附件是修改好可使用的ajaxfileupload.js文件。
需求:自定义样式【上传】按钮,点击之后【上传】按钮,打开文件选择对话框,选择文件后自动上传,并可预览该图片。
分析:
1.【上传】按钮是a链接,但是上传文件必然需要一个input type="file"的元素,在点击a链接这个【上传】按钮的时候,触发input type="file"元素的click方法打开文件选择对话框,选择文件后,触发input type="file" 的onchange方法,然后调用ajaxfileupload的上传方法开始上传。
2.服务器端,接收此文件数据,保存到文件服务器上,返回此文件的相对路径,放入一个隐藏域,最后提交表单时,将此相对路径提交给后台保存入库。
3.预览,通过获取图片的流数据显示图片。
用到的技术:jquery,ajaxfileupload,springMVC
代码:
1.HTML片段
<div class="uploadPicture"> <img id="imgHead" src="" width="106" height="122" alt="头像"> <input type="file" onchange="uploadHead();" id="basicInfoHead" style="display:none;" name="basicInfoHead" /> <input type="hidden" id="basicHeadUrl" > <a href="#basicInfo" id="uploadBasicInfoHead" >上传头像</a> </div>
2.JS代码
//上传头像,触发click方法 $('#uploadBasicInfoHead').on('click',function(){ $('#basicInfoHead').click(); }); function uploadHead(){ $.ajaxFileUpload({ url:"${pageContext.request.contextPath}/profile/uploadBasicHead",//需要链接到服务器地址 secureuri:false, fileElementId:"basicInfoHead",//文件选择框的id属性 dataType: 'json', //json success: function (data) { $("#imgHead").attr("src","${pageContext.request.contextPath}/profile/readImage?imagePath="+data.imagePath); $('#basicHeadUrl').val(data.imagePath); },error:function(XMLHttpRequest, textStatus, errorThrown){ alert('上传失败!'); } }); };
3.JAVA代码
//上传文件方法 @RequestMapping(value = "profile/uploadBasicHead", produces = "text/plain;charset=UTF-8") @ResponseBody public String ajaxUpload(HttpServletRequest request) throws IllegalStateException, IOException { MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; String fileName = ""; String uploadPath = "uploadFile/head/"; String path =request.getSession().getServletContext().getRealPath("/")+uploadPath; /*File uploadPathFile = new File(path); if (!uploadPathFile.exists()) { uploadPathFile.mkdir(); }*/ String realPath = ""; for (Iterator it = multipartRequest.getFileNames(); it.hasNext();) { String key = (String) it.next(); MultipartFile mulfile = multipartRequest.getFile(key); fileName = mulfile.getOriginalFilename(); fileName = handlerFileName(fileName); File file = new File(path + retFileName); mulfile.transferTo(file); } realPath = "{\"imagePath\":\""+uploadPath+fileName+"\"}"; return realPath; } //文件名称处理 private String handlerFileName(String fileName) { //处理名称start fileName = (new Date()).getTime()+"_"+fileName; //时间戳+文件名,防止覆盖重名文件 String pre = StringUtils.substringBeforeLast(fileName, "."); String end = StringUtils.substringAfterLast(fileName, "."); fileName = Digests.encodeByMd5(pre)+"."+end;//用MD5编码文件名,解析附件名称 //处理名称end return fileName; } //预览,获取图片流 @RequestMapping(value = "profile/readImage", produces = "text/plain;charset=UTF-8") public void readImage(HttpServletRequest request, HttpServletResponse response){ String imagePath = request.getSession().getServletContext().getRealPath("/")+request.getParameter("imagePath"); try{ File file = new File(imagePath); if (file.exists()) { DataOutputStream temps = new DataOutputStream(response .getOutputStream()); DataInputStream in = new DataInputStream( new FileInputStream(imagePath)); byte[] b = new byte[2048]; while ((in.read(b)) != -1) { temps.write(b); temps.flush(); } in.close(); temps.close(); } } catch (Exception e) { e.printStackTrace(); } }
相关推荐
ajaxFileUpload实现图片上传,内附使用说明
使用struts 2 和ajaxFileUpload组件实现图片上传预览,直接在myeclipse和tomcat环境下就可以运行,同时附带了相应的实现说明。
php结合jquery ajaxfileupload及jcrop插件实现无刷新上传,裁剪
AJAXFileUpload ajax 异步文件上传 进度条AJAXFileUpload ajax 异步文件上传 进度条
ajaxFileUpload 文件上传
框架使用的是JFinal,通过ajaxfileupload.js实现了图片的异步上传,可参考使用。 下载后,导入MyEclipse即可直接运行,我的用的是MyEclipse 2014。 有疑问的,可以看我的博客详细说明。
jquery ajaxfileupload上传插件,用于ajax的异步文件上传
通过ajaxfileupload实现JS的文件上传
ajaxFileUpload上传文件,ajaxFileUpload上传文件,ajaxFileUpload上传文件,ajaxFileUpload上传文件,ajaxFileUpload上传文件
ajaxfileupload.js 这是个非常好的异步上传图片的插件,来解决form表单上传时要刷新页面的问题。
主要为大家详细介绍了JFinal使用ajaxfileupload实现图片上传及预览,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
无刷新上传图片并且裁剪然后保存到数据库,运用Jcrop+ajaxfileupload+thinkphp +jquery技术
ajaxfileupload多文件上传,ajaxfileupload多文件上传,ajaxfileupload多文件上传,ajaxfileupload多文件上传
ajaxfileupload ajaxFileUpload是一个异步上传文件的jQuery插件。
AjaxFileUpload可以实现ajax文件上传
ajaxfileupload.js用于文件上传
ajaxfileupload.js 多文件上传,很好用的!