`
小网客
  • 浏览: 1243504 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

利用diyUpload做多图片上传及预览

    博客分类:
  • J2ee
 
阅读更多

需求:

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;
	}
}
0
4
分享到:
评论
2 楼 秋水涛静 2018-01-26  
来来来  你告诉我你贴的这代码有什么用??你给的下载包又有什么用??楼主 求解答
1 楼 andseny 2017-12-08  
如果可以的话,求一份源码,谢谢  邮箱:846526948@qq.com

相关推荐

    diyUploadjQuery多张图片批量上传插件

    【diyUploadjQuery多张图片批量上传插件】是一个基于jQuery的前端组件,主要用于实现用户在Web应用中一次性上传多张图片的功能。这个插件极大地简化了图片上传的流程,提高了用户体验,尤其适用于需要大量图片交互的...

    基于webuploader的图片批量上传插件 php diyupload

    WebUploader是一个优秀的JavaScript文件上传组件,而PHP DIYUpload则是利用WebUploader进行后端处理的一种实践方案,实现了分片上传和图片批量上传功能,极大地提升了用户体验。 一、WebUploader简介 WebUploader...

    多图片上传和取消上传(基于框架)

    本篇将重点讲解如何实现基于HTML5的多图片上传及取消上传的机制。 在HTML5中,File API的引入使得直接在浏览器端处理文件变得可能,包括读取、写入和上传文件。多图片上传的核心在于`&lt;input type="file"&gt;`元素的`...

    基于webuploader多图片上传插件diyUpload.js

    【基于WebUploader多图片上传插件DIYUpload.js】是一个专为网页设计的JavaScript组件,主要功能是实现用户在浏览器端进行多张图片的上传。它支持Base64编码的图片格式,尤其适用于移动端应用,提供了友好的用户体验...

    diyUpload.js

    《基于WebUploader的多图片上传插件:diyUpload.js》 在当今互联网时代,用户对网站和应用程序的交互体验有着越来越高的需求,其中图片上传功能是不可或缺的一部分。`diyUpload.js`是一款基于WebUploader的多图片...

    webuploader批量添加、删除、回显编辑图片完整demo(PHP版)

    2. **图片批量上传**:WebUploader允许用户一次性选择多个图片文件进行上传,通过监听`fileQueued`事件来处理每个被选中的文件,将其加入到待上传队列中。 3. **图片预览**:在用户选择图片后,WebUploader可以通过...

    ecshop小京东,自定义kindeditor多图上传插件

    2. **文件选择**:利用HTML5的File API,允许用户选择多张图片并存储在内存中,准备上传。 3. **预览功能**:在上传前提供图片预览,让用户可以检查图片效果。 4. **上传逻辑**:通过AJAX异步上传,保持页面的流畅...

    多图片无刷新上传

    在IT领域,多图片无刷新上传是一项常见的前端技术,它主要应用于网站的图像上传功能,让用户在不刷新页面的情况下实现图片的批量上传。这个技术提高了用户体验,使得上传过程更为流畅和快捷。本篇将深入探讨多图片无...

    jQuery多张图片批量上传插件

    批量上传插件会利用FileReader接口读取选中的图片,预览或者进行必要的文件大小、格式检查。 3. **FormData对象**:在异步上传过程中,FormData对象扮演着关键角色。它可以将文件与表单数据一起打包,然后通过...

    jQuery多图片批量上传插件

    本文将详细讲解如何利用jQuery实现多图片批量上传功能,以及相关插件的使用方法。 批量上传多张图片是网页交互中常见且实用的功能,尤其在社交媒体、电子商务或图像分享平台。jQuery提供了丰富的API和插件支持,...

Global site tag (gtag.js) - Google Analytics