需求：

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)@ResponseBodypublic 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;} }

總結

以上是生活随笔為你收集整理的利用diyUpload做多图片上传及预览的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。