Learn to upload controls using Angularjs files _angularjs

Some time ago to do the project encountered a need is to upload files, probably need to implement the style is such a son, see the following figure:

You need to upload two files at the same time. and specify the file format and file size. Because the front-end framework uses angular, and do not want to because of an upload function to introduce a jquery, so on the internet to find angular upload control, because angular is relatively new, seemingly not too mature plug-ins, online tutorials are mostly copy and paste, Anyway, it didn't work out so much ... But emperor, finally let me encounter this powerful plug-ins, let me have a kind of encounter feeling ah, rely on official documents and seniors help, finally understand the basic use of methods. Good things to share, so now share with you the way he uses, if you just need to use, hope to help everyone.

The style of the upload button
first of all, I would like to first say the Upload file button style, why? We all know that the upload will use this tag. <input type= "File"/>, the default style for this line of code is really a bit ugly, see the following figure:

In a slightly more forced web site, such a style is a bit of a loss of image, and if you need to add a previous input box to display the filename, then the default display file name of the area how to hide it? Don't worry, keep looking:

With a label to wrap the input tag, and then the input label opacity set to 0, it is OK! OK, look at the code:

Html:

 <div>
  <input class= "filename" type= "text" readonly= "readonly"/> <a
  "javascript:;" href= "File" >
   <input type= "file" name= "key"/> Browse
  </a>
 </div>
  <div>
  < Input class= "filename" type= "text" readonly= "readonly"/> <a href=
  "javascript:;" name= "file" >
   < Input type= "file" name= "key"/> Browse
  </a>
 </div>

Then the CSS file:

. filename{
 width:300px;
 height:30px;
 line-height:30px;
}
a{
 width:50px;
 Text-align:center;
 height:30px;
 line-height:30px;
 position:raletive;
 Cursor:pointer;
 Overflow:hidden;
 Display:inline-block;
}
A input{
 position:absolute:
 left:0;
 top:0;
 opacity:0;
}

It's done,!!!. The style you see becomes like this, see figure below:

You can control the previous input box to display the name of the file you have chosen, is it more beautiful?

Angular-file-upload

Examples to find the files we need. The Es5-shim.min.js file in the example is introduced for old browser compatibility, so this plugin is really powerful.

Then we will use this plug-in step-by-step to implement the file upload function.

This plugin defines a few instructions:nv-file-drop, nv-file-select, uploader

From the meaning of the word should not be difficult to guess, the first support file to remove the selection, the second is click on the selection, uploader used to bind the new Upload object in the controller.

HTML file

<form class="form-horizontal" name="form">
 <div class="form-line">
  <label>Please select the certificate file:</label><span class="small-tip">Certificate file only supports .pem format, file size is less than 1M</span>
  <div class="choose-file-area">
   <input class="file-name" type="text" readonly="readonly" ng-model="fileItem.name"/>
   <a href="javascript:;" class="choose-book">
    <input type="file" name="certificate" nv-file-select uploader="uploader" ng-click="clearItems()"/>Browse
   </a>
  </div>
 </div>
 <div class="form-line">
  <label>Please select the private key file:</label><span class="small-tip">Private key file only supports .key format, file size is less than 1M</span>
  <div class="choose-file-area">
   <input class="file-name" type="text" readonly="readonly" ng-model="fileItem1.name"/>
   <a href="javascript:;" class="choose-key">
    <input type="file" name="key" nv-file-select uploader="uploader1" ng-click="clearItems1()"/>Browse
   </a>
  </div>
 </div>
 <button type="submit" ng-click="UploadFile()">Submit</button>
</form>

First, note that you need to upload two files here, so I created two upload objects to facilitate managing files and handling callback functions. Finally give the Upload button a click event, while processing two objects upload events.

Controller files

Var app = angular.module('app', ['angularFileUpload']);
App.controller('uploadController',['$scope', 'FileUploader', function($scope, FileUploader) {
 $scope.uploadStatus = $scope.uploadStatus1 = false; //Define the status returned after two uploads, successfully failed
 Var uploader = $scope.uploader = new FileUploader({
  Url: 'upload.php',
  queueLimit: 1, / / number of files
  removeAfterUpload: true //Delete files after uploading
 });
 Var uploader1 = $scope.uploader1 = new FileUploader({
  Url: 'upload.php',
  queueLimit: 1,
  removeAfterUpload: true
 });
 $scope.clearItems = function(){ //When reselecting the file, clear the queue to achieve the effect of overwriting the file
  uploader.clearQueue();
 }
 $scope.clearItems1 = function(){
  uploader1.clearQueue();
 }
 uploader.onAfterAddingFile = function(fileItem) {
  $scope.fileItem = fileItem._file; //After adding the file, assign the file information to the scope
 };
 Uploader1.onAfterAddingFile = function(fileItem) {
  $scope.fileItem1 = fileItem._file; //After adding the file, assign the file information to the scope
  / / Can be here to determine whether the added file name suffix and file size meet the needs.
 };
 uploader.onSuccessItem = function(fileItem, response, status, headers) {
  $scope.uploadStatus = true; //If the upload succeeds, change the status to true
 };
 uploader1.onSuccessItem = function(fileItem,response, status, headers){
  $scope.uploadStatus1 = true;
 }
 $scope.UploadFile = function(){
  uploader.uploadAll();
  uploader1.uploadAll();
  If(status){
   If(status1){
    Alert('Upload successful!');
   }else{
    Alert ('Certificate success! Private key failed!');
   }
  }else{
   If(status1){
    Alert ('Private key success! Certificate failed!');
   }else{
    Alert('Upload failed!');
   }
  }
 }
}]) 

Summarize
in the example above, I have defined two upload objects because I want to upload two files, every time I select the file should overwrite the previously selected file, so if you define an object, a bit bad to the location of the operation coverage, and define two objects, in the choice of time, You can completely empty the current object's file queue, and then add it.

In fact, I found out that I could not define two upload objects, because this plugin provides a removefromqueue (index) method, which is the index value of the file in the file queue array. Because it is two times to select the file, so the length of the control in 2, and then each time you choose to call this method, according to the location of the incoming 0 or 1 is good.

If you need to implement the same window to select multiple files, use the plus <input type= "file" multiple= "true"/>.

If you need to restrict the file type, you can use the <input type= "file" accept= "image/*"/>.

Accept list of value types:

* accept= "Application/msexcel"

* accept= "Application/msword"

* accept= "application/pdf"

* accept= " Application/poscript "

* accept=" application/rtf "

* accept=" application/x-zip-compressed "
 
* accept=" Audio/basic "

* accept=" Audio/x-aiff "

* accept=" audio/x-mpeg "*

accept=" Audio/x-pn/realaudio "

* accept= "Audio/x-waw"

* accept= "image/*"

* accept= "image/gif"
 
* accept= "image/jpeg"

* accept= " Image/tiff "

* accept=" image/x-ms-bmp "

* accept=" IMAGE/X-PHOTO-CD "*

accept=" image/x-png "

* accept= "Image/x-portablebitmap"

* accept= "Image/x-portable-greymap"

* accept= "Image/x-portable-pixmap"

* accept= "Image/x-rgb"

* accept= "text/html"

* accept= "Text/plain"

* accept= "Video/quicktime"

* accept= "VIDEO/X-MPEG2"

* accept= "Video/x-msvideo"

This plugin also provides a number of configuration parameters, object methods, and callback functions.

For more highlights Please click the "javascript File Upload operation Summary", welcome to learn to read.

The above is about the use of Angularjs file Upload Control method Introduction, I hope to help you learn.