需求:
1.ajax上传多个图片
2.图片预览
实现:
1.引入附件的js
2.html页面:
<div id="test" > </div> <script type="text/javascript"> $('#test').diyUpload({ url:'${basePath}upload/img', success:function( data ) { console.info( data ); }, error:function( err ) { console.info( err ); } }); </script>
2.java上传类代码:
@Controller @RequestMapping("upload") public class UploadController { private String processImg(HttpServletRequest request, String imageDir) throws Exception { String uuid = CommonUtils.getUUID(); request.setCharacterEncoding("UTF-8"); DiskFileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory); List<FileItem> items = upload.parseRequest(request); Iterator<FileItem> itr = items.iterator(); while (itr.hasNext()) { FileItem item = (FileItem) itr.next(); if (item.isFormField()) { System.out.println("表单参数名:" + item.getFieldName() + ",表单参数值:" + item.getString("UTF-8")); } else { System.out.println("上传文件的大小:" + item.getSize()); System.out.println("上传文件的类型:" + item.getContentType()); System.out.println("上传文件的名称:" + item.getName()); FileUtils.forceMkdir(new File(imageDir)); String file = imageDir + File.separator + uuid + "." + FilenameUtils.getExtension(item.getName()); item.write(new File(file)); return uuid + "." + FilenameUtils.getExtension(item.getName()); } } return uuid; } @RequestMapping(value = "/img", method = RequestMethod.POST) @ResponseBody public UploadResVo img(HttpServletRequest request) throws Exception { if (!isLogin(request)) { throw new RuntimeException(ExceptionMsg.UI_NOPERMISSION); } CommonProperties commonProperties = RequestContextUtils .getWebApplicationContext(request).getBean( "com.eqiurong.mp.vo.CommonProperties", CommonProperties.class); String imageDir = commonProperties.baseRealDir + File.separator + commonProperties.uploadDir + File.separator; UploadResVo resVo = new UploadResVo(); MsgVo msg = new MsgVo(); String file = processImg(request, imageDir); msg.setId(file); msg.setLocalname(file); msg.setUrl(commonProperties.basePath + commonProperties.uploadDir + File.separator + file); resVo.setMsg(msg); return resVo; } }
相关推荐
【diyUploadjQuery多张图片批量上传插件】是一个基于jQuery的前端组件,主要用于实现用户在Web应用中一次性上传多张图片的功能。这个插件极大地简化了图片上传的流程,提高了用户体验,尤其适用于需要大量图片交互的...
WebUploader是一个优秀的JavaScript文件上传组件,而PHP DIYUpload则是利用WebUploader进行后端处理的一种实践方案,实现了分片上传和图片批量上传功能,极大地提升了用户体验。 一、WebUploader简介 WebUploader...
本篇将重点讲解如何实现基于HTML5的多图片上传及取消上传的机制。 在HTML5中,File API的引入使得直接在浏览器端处理文件变得可能,包括读取、写入和上传文件。多图片上传的核心在于`<input type="file">`元素的`...
【基于WebUploader多图片上传插件DIYUpload.js】是一个专为网页设计的JavaScript组件,主要功能是实现用户在浏览器端进行多张图片的上传。它支持Base64编码的图片格式,尤其适用于移动端应用,提供了友好的用户体验...
《基于WebUploader的多图片上传插件:diyUpload.js》 在当今互联网时代,用户对网站和应用程序的交互体验有着越来越高的需求,其中图片上传功能是不可或缺的一部分。`diyUpload.js`是一款基于WebUploader的多图片...
2. **图片批量上传**:WebUploader允许用户一次性选择多个图片文件进行上传,通过监听`fileQueued`事件来处理每个被选中的文件,将其加入到待上传队列中。 3. **图片预览**:在用户选择图片后,WebUploader可以通过...
2. **文件选择**:利用HTML5的File API,允许用户选择多张图片并存储在内存中,准备上传。 3. **预览功能**:在上传前提供图片预览,让用户可以检查图片效果。 4. **上传逻辑**:通过AJAX异步上传,保持页面的流畅...
在IT领域,多图片无刷新上传是一项常见的前端技术,它主要应用于网站的图像上传功能,让用户在不刷新页面的情况下实现图片的批量上传。这个技术提高了用户体验,使得上传过程更为流畅和快捷。本篇将深入探讨多图片无...
批量上传插件会利用FileReader接口读取选中的图片,预览或者进行必要的文件大小、格式检查。 3. **FormData对象**:在异步上传过程中,FormData对象扮演着关键角色。它可以将文件与表单数据一起打包,然后通过...
本文将详细讲解如何利用jQuery实现多图片批量上传功能,以及相关插件的使用方法。 批量上传多张图片是网页交互中常见且实用的功能,尤其在社交媒体、电子商务或图像分享平台。jQuery提供了丰富的API和插件支持,...