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

需求:

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
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值