使用DropzoneJS上传图片,一步到位很给力!
2015-06-25 14:44
309 查看
使用DropzoneJS
1、 效果如下所示:2、前台HTML页面
[code] <div class="row"> <div class="col-md-12"> <form dropzone action="rest/components/myComponent" class="dropzone" enctype="multipart/form-data" method="post"></form> </div> </div>
3、 后台处理请求
[code] @POST @Path("/myComponent") @Produces(MediaType.APPLICATION_JSON) public Response uploadMyComponentImage(@Context HttpServletRequest request) { //当前登录的用户 String userId = securitySupport.getSimplePrincipalByName(Principals.IDENTITY).getValue(); //存放上传的图片 Map<String, String> infoMap = new HashMap<String, String>(); //使用较为原始的方法获取根路径 String url = request.getSession().getServletContext().getRealPath("/"); DiskFileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory); try { Map<String, List<FileItem>> items = upload.parseParameterMap(request); for (Entry<String, List<FileItem>> entry : items.entrySet()) { String key = entry.getKey(); Iterator<FileItem> itr = items.get(key).iterator(); while (itr.hasNext()) { FileItem item = itr.next(); //处理表单内容 if (item.isFormField()) { System.out.println("Form parameter name:" + item.getFieldName() + ",Form parameter value:" + item.getString("UTF-8")); } else { //处理上传文件 if (item.getName() != null && !"".equals(item.getName())) { System.out.println("Upload file size:" + item.getSize()); System.out.println("Upload file type:" + item.getContentType()); System.out.println("Upload file name:" + item.getName()); String newfileUrl = "mocks\\images\\" + userId + "\\description\\"; String newfileName = UUID.randomUUID().toString() + "-" + item.getName(); System.out.println("Upload file url:" + url + newfileUrl + newfileName + "\n"); infoMap.put("newfile", newfileUrl.replaceAll("\\\\", "/") + newfileName); File file = new File(url + newfileUrl); if (!file.exists()) { file.mkdirs(); } file = new File(url + newfileUrl + newfileName); item.write(file); } else { infoMap.put("", ""); } } } } } catch (FileUploadException e) { e.printStackTrace(); } catch (Exception e) { e.printStackTrace(); } return Response.ok(infoMap).build(); }
4、 查看上传之后的图片JS
[code] var MyComponents = $resource('rest/components/myComponents'); MyComponents.query({}, function(data) { $scope.myComponents = data; });
5、页面中遍历显示输出
[code]<div class="col-xs-12 col-sm-6 col-md-3 margin_bottom" data-ng-repeat="myComponent in myComponents | filter:search"> <a data-ng-href="#!/manage/component/{{myComponent.name}} /{{myComponent.version}}"> <img data-ng-src="{{myComponent.image}}" alt="{{myComponent.imageDescription}}" class="img-Thumbnail"><br> </div>
markdown用起来还不是太习惯啊
相关文章推荐
- javascript基础知识概念
- 解析处理常用json数据总结
- JavaScript:exec()方法的用法及说明
- Javascript类继承-机制-代码Demo【原创】
- 直接读取服务器的一个json 文件
- 从零开始构建实现一个JavaScript模块化加载器
- 简单的jsTree运用
- 动态调试JS代码
- js 监听整个页面的回车事件
- js正则对象RegExp的$1...$9 属性
- javascript eval和JSON之间的联系
- AJAX 跨域请求 - JSONP获取JSON数据
- JavaScript读取XML
- js 打印网页指定内容
- javascript实现跨域的方法汇总
- JS日期时间选择器
- 浅谈JavaScript字符串拼接
- javascript最基本的函数汇总
- js获取url 参数
- 使用javascript将时间转换成今天,昨天,前天等格式