Use of ANGULAR-FILE-UPLOAD+SPRINGMVC

File uploads are required for recent projects, using the Angular-file-upload plugin to complete

Let's start by introducing some of the properties of this plugin (see official documentation)

Fileuploader Property

• URL {String} : Server path for uploading files
• Alias {String} : Contains the name of the file, which is the default

• Queue {Array} : Upload queues
• Progress {Number} : Upload queue progress, read-only
• Headers {Object} : Upload the header file information, the browser needs to support HTML5
• FormData {Array} : Form data sent with a file
• Filters {Array} : Apply the filter before the file is added to the upload queue. If the filter returns true then the file is added to the queue

• autoupload {Boolean} : File is automatically uploaded after queue, default is False
• Method {String} : The request method, the default is post, the browser needs to support HTML5
• Removeafterupload {Boolean} : The file was successfully uploaded and removed from the queue, the default is False
• IsHTML5 {Boolean} : Returns True if the browser supports HTML5 upload, read-only
• Isuploading {Boolean} : The file is being uploaded with true, read-only
• Queuelimit {Number} : Maximum number of uploaded files (pre-defined)
• Withcredentials {Boolean} : Use Cors, default is false, browser needs to support HTML5

Method

• Addtoqueue function(files[, options[, filters]]) { : ADD items to the queue, where was files a {FileList|File|HTMLInputElement} , is a and is options {Object} filters a {String} . Add items to the upload queue, yes Yes files {FileList|File|HTMLInputElement}， options {Object} and filters Yes{String}
• RemoveFromQueue function(value) { : Remove an item from the queue, where value is {FileItem} or index of item. Removes an item from the upload queue, either value as an {FileItem} ordinal of an item
• Clearqueue function() { : Removes all elements from the queue. Remove all elements from the upload queue
• Uploaditem function(value) { : Uploads an item, where value is {FileItem} or index of item. The item value can be uploaded, {FileItem} or the item's ordinal number
• Cancelitem function(value) { : Cancels uploading of item, where value is {FileItem} or index of item. To cancel an uploaded item
• Uploadall function() { : Upload all pending items on the queue. Upload all items in the upload queue
• Cancelall function() { : Cancels all current uploads. Cancel all current uploads
• Destroy function() { : Destroys a uploader.
• Isfile function(value) {return {Boolean};} : Returns True if value is {File} .
• Isfilelikeobject function(value) {return {Boolean};} : Returns True if value is {FileLikeObject} .
• Getindexofitem function({FileItem}) {return {Number};} : Returns The index of the {FileItem} queue element. Returns the ordinal number of an item in the upload queue
• Getreadyitems function() {return {Array.<FileItems>};} : Return items is ready to upload. Back to the item you're uploading
• Getnotuploadeditems function() {return {Array.<FileItems>};} : Return an array of all pending items on the queue returns an item that is not uploaded in the upload queue

callback function

• Onafteraddingfile function(item) { : After adding files to the upload queue
• Onwhenaddingfilefailed function(item, filter, options) { : After failed to add file to upload queue
• Onafteraddingall function(addedItems) { : Add all selected files to the upload queue
• Onbeforeuploaditem function(item) { : Before uploading files
• Onprogressitem function(item, progress) { : The file crosses
• Onsuccessitem function(item, response, status, headers) { : After the file upload is successful
• Onerroritem function(item, response, status, headers) { : After file upload failed
• Oncancelitem function(item, response, status, headers) { -After file upload is canceled
• Oncompleteitem function(item, response, status, headers) { : After file upload is complete
• Onprogressall function(progress) { : Upload a queue of all files on the crossing
• Oncompleteall function() { : Upload queue after all files upload is complete

Use

Of course first need to add the plugin JS

Bower

Bower Install Angular-file-upload

Import JS on page

<src= "Bower_components/angular-file-upload/dist/angular-file-upload.min.js" ></ Script >

Join Angularfileupload

var myapp = Angular.module (' Add ', [' angularfileupload '])

Html

I am here to upload the picture so the code is as follows:

1 <DivNg-controller= "Addproduct">2 <Div>3    <lable>Product Name</lable>4    <inputtype= "text"Ng-model= "Productinfo.name">5 </Div>6 <Div>7 <lable>Product model</lable>8  <inputtype= "text"Ng-model= "Productinfo.type">9 </Div>Ten <Div> One <lable>Product picture</lable> A <inputtype= "File"name= "Photo"Nv-file-select=""Uploader= "uploader"Accept= "image/*"ngf-max-size= "2MB"Ngf-model-invalid= "ErrorFile" /></Div> - <Div><Buttonclass= "Btn btn-info"Ng-click= "addproduct ()"></Div> - </Div>

This is the simplest use of the main uploader this property, the other accept, ngf-max-size, Ngf-model-invalid are some of the properties of the restricted image

Js

1Myapp.controller (' addproduct ', [' $scope ', ' $http ', ' Fileuploader ',function($scope, $http, Fileuploader) {2          3 //define an array in the periphery, assign a value to Formdata, and change the array to make the data change.4          varproductinfo=[];5          varuploader = $scope. Uploader =NewFileuploader ({6URL: ' Add ',7 Formdata:productinfo8         });9Uploader.onsuccessitem =function(Fileitem, Response, status, headers) {Ten alert (response);  One          }; A$scope. addproduct =function() { - Uploader.uploadall (); -              the         } -}])

Java

1@RequestMapping (value= "Add", method =requestmethod.post)2      PublicResponseentity<object> addproduct (@RequestParam ("File") Multipartfile Uploadfiles,productvo productvo) {3 4String filename=uploadfile.getoriginalfilename ();5String prefix= "." +filename.substring (Filename.lastindexof (".") +1);6File dst=NULL;7         Try {8String root = System.getproperty ("Catalina.base");//get the Tomcat root path9File Uploaddir =NewFile (Root, "webapps/upload");//create an object that points to the Tomcat/webapps/upload directoryTen             if(!uploaddir.exists ()) { OneUploaddir.mkdir ();//Create the Upload directory if it does not exist A             } -DST =NewFile (Uploaddir, -Uuid.randomuuid (). toString () +prefix);//creates a pointer to a file object in the upload directory, with a randomly generated file name theUploadfile.transferto (DST);//Create a file and copy the uploaded file to the past -}Catch(Exception e) { - e.printstacktrace (); -         } +       //then put the path set to Productvo to complete adding "/upload/" +dst.getname (); -  +}

So it was done.

Problems

In JS to assign value to Formdata because Formdata's new generation is fixed, if the direct write formdata:[$scope. Prodctinfo], will cause formdata no value, the background will not get other data.

Use of ANGULAR-FILE-UPLOAD+SPRINGMVC