需求:
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; } }
相关推荐
diyUpload JAVA版,支持多文件,多图片先预览后上传,JAVA 项目文件部署即可使用
diyUpload - jQuery多张图片批量上传插件 koa2 后台服务
var $tgaUpload = $('#goodsUpload').diyUpload({ url:'/uploadFilePath', success:function( data ) { }, error:function( err ) { }, buttonText : '', accept: { title: "Images", extensions: 'gif,jpg,...
php结合web uploader插件实现分片上传文件, 图片批量上传,非常好用
diyUploadjQuery多张图片批量上传插件
上传图上的JS
基于webuploader多图片上传插件diyUpload.js多张图片上传 base64格式 移动端可支持
多张图片上传 base64格式 移动端可支持,代码中有详细注释。
diyUpload开发文档及代码,有完整的案例......................................................
jQuery多张图片批量上传插件是一款可以选择多张图片同时上传,不要的还可以移除。
详细请查看:https://blog.csdn.net/qq_22146195/article/details/103779432
ecshop小京东v5富文本编辑器在使用其多图上传是会出现按钮消失,或者在移动端按钮不显示的问题,针对此问题,我将其多图上传插件更改为diyupload
uploadify JSP的上传例子 将官方网站的PHP例子改写成jsp版本的