使用DropzoneJS上传图片，一步到位很给力！

使用DropzoneJS

1、 效果如下所示：

2、前台HTML页面

   <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、 后台处理请求

    @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

  var MyComponents = $resource(‘rest/components/myComponents‘);

   MyComponents.query({}, function(data) {
          $scope.myComponents = data;
   });

5、页面中遍历显示输出

<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用起来还不是太习惯啊