Using DropzoneJS to upload images is awesome !, Upload images using dropzonejs

Using DropzoneJS to upload images is awesome !, Upload images using dropzonejs
Use DropzoneJS

1. The effect is as follows:

2. Front-end HTML page

   <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. Request Processing in the background

@ POST @ Path ("/myComponent") @ Produces (MediaType. APPLICATION_JSON) public Response uploadMyComponentImage (@ Context HttpServletRequest request) {// String userId = securitySupport. getSimplePrincipalByName (Principals. IDENTITY ). getValue (); // store the uploaded Image Map <String, String> infoMap = new HashMap <String, String> (); // obtain the root path String url = request using the primitive method. 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 (); // process the Form Content If (item. isFormField () {System. out. println ("Form parameter name:" + item. getFieldName () + ", Form parameter value:" + item. getString ("UTF-8");} else {// process the uploaded file 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 + new FileUrl + 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. View uploaded images. JS

  var MyComponents = $resource('rest/components/myComponents');   MyComponents.query({}, function(data) {          $scope.myComponents = data;   });

5. traverse and display the output on the page

<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}}">            <br>     </div>

Markdown is not a habit.