Use Dropzonejs upload picture, one step is very to force!

Using Dropzonejs

1. The effect is as follows:

2. Foreground HTML page

   <divclass="row">        <divclass="col-md-12">            <form dropzone action="rest/components/myComponent"class="dropzone" enctype="multipart/form-data" method="post"></form>        </div>    </div>

3. Background processing request

@POST @Path ("/mycomponent") @Produces (mediatype. Application_json) public Response uploadmycomponentimage (@Context httpservletrequest request) {//currently logged on user String use RId = Securitysupport. Getsimpleprincipalbyname(Principals. IDENTITY). GetValue();Storing uploaded images map<string, string> infomap = new hashmap<string, string> ();Get the root path by using a more primitive method 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();Process the form content if (item. Isformfield()) {System. out. println("Form parameter name:"+ Item. GetFieldName() +", Form parameter value:"+ Item. getString("UTF-8"));} else {//processing the upload 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 + 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, view the image after uploading JS

  var$resource(‘rest/components/myComponents‘);   function(data) {          $scope.myComponents = data;   });

5, the page to traverse the display output

 <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 used to be a little used up.

Use Dropzonejs upload picture, one step is very to force!