Angular-file-upload Get uploaded file queue

Introduction of resources The first step of an essay, no longer repeat,

Step Two: Build your App

HTML tag plus directive: ng-app= "App"

Body tag plus directive: ng-controller= "AppController"

HTML code:

<Divclass= "Pure-u-1-1"style= "margin-bottom:40px" >                         <H3>File queue</H3>                         <P>Queue Length: {{uploader.queue.length}}</P>                         <Tableclass= "Table">                             <thead>                             <TR>                                 <thwidth= "50%">File name</th>                                 <thNg-show= "UPLOADER.ISHTML5">Size</th>                                 <thNg-show= "UPLOADER.ISHTML5">Progress</th>                                 <th>State</th>                                 <th>Operation</th>                             </TR>                             </thead>                             <tbody>                             <TRng-repeat= "Item in Uploader.queue">                                 <TD><Strong>{{Item.file.name}}</Strong></TD>                                 <TDNg-show= "UPLOADER.ISHTML5"nowrap>{{Item.file.size/1024/1024|number:2}} MB</TD>                                 <TDNg-show= "UPLOADER.ISHTML5">                                     <Divclass= "Progress"style= "margin-bottom:0;">                                         <Divclass= "Progress-bar"role= "ProgressBar"Ng-style= "{' width ': item.progress + '% '}"></Div>                                     </Div>                                 </TD>                                 <TDclass= "Text-center">                                     <spanNg-show= "Item.issuccess"><Iclass= "Glyphicon Glyphicon-ok"></I></span>                                     <spanNg-show= "Item.iscancel"><Iclass= "Glyphicon glyphicon-ban-circle"></I></span>                                     <spanNg-show= "Item.iserror"><Iclass= "Glyphicon glyphicon-remove"></I></span>                                 </TD>                                 <TDnowrap>                                     <!--<button type= "button" class= "btn btn-success btn-xs" ng-click= "Item.upload ()" ng-disabled= "Item.isready | | item.isuploading | | Item.issuccess "> -                                         <!--<span class= "Glyphicon glyphicon-upload" ></span> upload -                                     <!--</button> -                                     <!--<button type= "button" class= "btn btn-warning btn-xs" ng-click= "Item.cancel ()" Ng-disabled= "!item.isuploading"                                     > <span class= "Glyphicon glyphicon-ban-circle" ></span> Cancel </button> -                                     <Buttontype= "button"class= "btn btn-danger btn-xs"Ng-click= "RemoveFile (item)">                                         <spanclass= "Glyphicon Glyphicon-trash"></span>Delete</Button>                                 </TD>                             </TR>                             </tbody>                         </Table>                         <Div>                             <Div>Total Queue progress:<Divclass= "Progress"style="">                                     <Divclass= "Progress-bar"role= "ProgressBar"Ng-style= "{' width ': uploader.progress + '% '}"></Div>                                 </Div>                             </Div>                                                  </Div>                     </Div>

View Code

The third step: JS code, the main realization:

Limit the number of file uploads,

Configure uploader Add File as upload,

Upload successfully obtains the response of the current file,

Uploader.removefromqueue (Index)

<script>    ' use strict ';    Angular.module (' app ', [' angularfileupload '])            . Controller (' AppController ', [' $scope ', ' Fileuploader ', function ( $scope, Fileuploader) {

  //Attachment Array$scope. attachlist=[]; //Uploading Attachments        varuploader = $scope. Uploader =Newfileuploader ({URL:'/knowledge/file/upload '        }); //limit the number of uploaded filesuploader.queuelimit=10; //Delete after uploading, clear queue        //uploader.removeafterupload= false;        //Add File Auto uploadUploader.autoupload =true; //Custom FiltersUploader.filters.push ({name:' Asyncfilter ', fn:function(item, options, deferred) {Console.log (' Asyncfilter '); SetTimeout (Deferred.resolve,1e3);         }        }); //Customizing methods for deleting individual documents$scope. RemoveFile =function(item) {varCurindex =Uploader.getindexofitem (item);             Uploader.removefromqueue (Curindex); $scope. Attachlist.splice (Curindex,1); Console.info (' $scope. Attachlist ', $scope. attachlist); Console.info (' Queue ', Uploader.queue); } Uploader.onbeforeuploaditem=function(item) {//console.info (' Onbeforeuploaditem ', item);        }; Uploader.onsuccessitem=function(Fileitem, Response, status, headers) {//Uploader.queueConsole.info (Uploader.queue);//for testing            //lengthConsole.info ("Queue Length:" +uploader.queue.length);//for testing            //FileitemConsole.info ("Fileitem:", Fileitem); //Curindex            varNumber=Uploader.getindexofitem (Fileitem); Console.info ("Getindexofitem:", number);//for testing            //Notuploadarr            varNotuploadarr =Uploader.getnotuploadeditems (); Console.info ("Notuploadarr:", Notuploadarr);//for testing                  if(response.success) {if(response.data!=NULL&&response.data.length>0) $scope. Attachlist.push (response.data[0]);        }; };

   }]);</script>

Angular-file-upload Get uploaded file queue