Angular angular-file-upload

When we write a website, the upload function is almost certain to be used. This is a plug-in that is often used, and it is simple to operate and very easy to use. The old rules are better to put the API. Fortunately, the API of this plug-in does not need to be viewed by the wall~

/nervgh/angular-file-upload

Going to the topic, how do we install it, or the same as Amway npm

npm install angular-file-upload

How do we use it in our project
A simple example on the official website

<div ng-app="app">
    <div ng-controller="AppController">
        <input type="file" nv-file-select uploader="uploader"/><br/>
        <ul>
            <li ng-repeat="item in ">
                Name: <span ng-bind=""></span><br/>
                <button ng-click="()">upload</button>
            </li>
        </ul>
    </div>
</div>

angular
    .module('app', ['angularFileUpload'])
    .controller('AppController', function($scope, FileUploader) {
        $scope.uploader = new FileUploader();
    });

Let's take a look at html<input type="file" nv-file-select uploader="uploader"/><br/>
The previous file is a special type used when uploading input.nv-file-selectIt is the upload style, this is the latest basic file upload, andnv-file-overThis is uploaded by dragging to the specified locationnv-file-dropYou can upload this file directly into the web page.
As for the later oneuploader="uploader"This is also required. This is an upload instance for our example. You can see that our controller has$ = new FileUploader();This is an instance upload, and we get this instance in the front desk and then operate.
The two attributes introduced here are required, and there are two optional attributesoptions="{Object}" filters="{String}"
I didn't understand options very well, and it seems that it was not used either. The filter is more useful. For example, we limit the number of uploads

({
        name: 'customFilter',
        fn: function(item, options) {
            return this. < 10;
        }
    });

The name of our filter is customFilter method execution subfn. queue is the file upload instance, that is, the attribute of the uploader. Here we introduce what attributes are, not all attributes, and all attributes on the official website, not many. Here we introduce what I have used
Some properties are read-only and cannot be modifiedprogress isHTML5 isUploadingThe percentage of uploaded data is a value, whether it is uploaded by H5, and the last one is whether it is uploading. When watching it on the official website, you need to pay attention to his type.queueIt is array array type that means our upload queueremoveAfterUploadWhether to delete it from the queue after uploadingurlThe path to upload the server is a must-use.autoUploadIs it automatically uploaded when the file is placed in the queue? Other attributes can be found on the official website
usage

 var uploader = $scope.uploader = new FileUploader({
        url: 'http://localhost:8080/server',
    });

Then there are some methods that come with them, which are divided into two categories on the official website, one is the method of uploading instance objects, and the other is the method of uploading files. Our first code()This is how to upload files. Because it is called by uploading the file, not the uploader instance method, this needs to be clarified.

ng-click="()"//This is the uploader when calling all upload methods. This is the example method

Let me introduce some example methods first.clearQueueClear the upload queue,uploadAllUpload allcancelAllCancel all
You can try the others yourself, I don't use much

File methodremove upload cancelOnly these three. Delete upload cancellation, this is relatively simple
The properties of the file are also easy to understand. I don’t use a lot of them. Most of them are read-only attributes. Let’s see if the file is in good state.
similarisUploading isUploaded isSuccess isCancel isError uploaderThe last one is necessary to say, this is used to call the father's reference for communication.

Then there is the callback function of the instance and the file return function. The method has the same meaning. First, introduce the callback function of the instance.

 = function(item /*{File|FileLikeObject}*/, filter, options) {
        ('onWhenAddingFileFailed', item, filter, options);
    };
     = function(fileItem) {
        ('onAfterAddingFile', fileItem);
    };
     = function(addedFileItems) {
        ('onAfterAddingAll', addedFileItems);
    };
     = function(item) {
        ('onBeforeUploadItem', item);
    };
     = function(fileItem, progress) {
        ('onProgressItem', fileItem, progress);
    };
     = function(progress) {
        ('onProgressAll', progress);
    };
     = function(fileItem, response, status, headers) {
        ('onSuccessItem', fileItem, response, status, headers);      
    };
     = function(fileItem, response, status, headers) {
        ('onErrorItem', fileItem, response, status, headers);
    };
     = function(fileItem, response, status, headers) {
        ('onCancelItem', fileItem, response, status, headers);
    };
     = function(fileItem, response, status, headers) {
        ('onCompleteItem', fileItem, response, status, headers);
    };
     = function() {
        ('onCompleteAll');
    };

The response parameter here is the data transmitted from the background. This parameter is more important

The method of the file is basically the same as this, and you can basically understand it by looking at the official website. That’s all for today. I’ll add it if you use uploads in the future. . . ~~~~