Learn how to use AngularJS File Upload control _ AngularJS

This article mainly helps you to learn how to use AngularJS file upload control angular-file-upload. If you are interested, you can refer to the requirement of uploading files when working on a project some time ago, the style to be implemented is like this, see:

You must upload two files simultaneously. Specify the file format and size. Because the front-end framework uses angular and does not want to introduce jquery because of one upload function, you can search for angular-based upload controls on the internet because angular is relatively new, it seems that there are not many mature plug-ins, and most of the online tutorials are copied and pasted. In short, they do not play a major role... however, Huang Tianyan had no worries. At last, I encountered this powerful plug-in, which gave me a sense of mutual sorrow. Relying on the help of official documents and senior engineers, I finally figured out the basic usage methods. I want to share some good things, so I want to share with you how to use it. If you need it, I hope it will help you.

Upload button style
First, I want to talk about the button style of the file to be uploaded. Why? We all know that this label is used for upload.The default style of this line of code is really a bit difficult to see, see:

In a website that is a little too powerful, such a style is a bit of a loss of image, and if you need to add an input box in front to display the file name, how can I hide the default display file name area? Don't worry. Continue:

Use the tag to wrap the input tag, and set the opacity of the input tag to 0! OK, check the Code:

Html:

  
              Browse
    
              Browse

Then there is 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;}

Success !!! The style you see becomes like this. See:

You can control the input box to display the file name you selected. Is it much better?

Angular-file-upload

In this example, we can find the files we need. The es5-shim.min.js file in the example is introduced for the compatibility of the old browser, so this plug-in is really powerful.

Then let's use this plug-in step by step to implement the file upload function.

This plugin defines several commands:Nv-file-drop, nv-file-select, uploader

It is not difficult to guess from the meaning of words. The first option is to drag and drop files, and the second option is to click Select. uploader is used to bind the newly created upload object in the controller.

Html file

First, pay attention to the need to upload two files, so I create two upload objects to facilitate file management and processing callback functions. Finally, you can click the upload button to process the upload events of both objects.

Controller File

Var app = angular. module ('app', ['angularfileupload']); app. controller ('uploadcontroller', ['$ scope', 'fileupload', function ($ scope, FileUploader) {$ scope. uploadStatus = $ scope. uploadStatus1 = false; // defines the status returned after two uploads. If the returned status is successful, var uploader = $ scope is returned. uploader = new FileUploader ({url: 'upload. php', queueLimit: 1, // number of objects removeAfterUpload: true // delete files after upload}); var uploader1 = $ scope. uploader1 = new FileUploa Der ({url: 'upload. php', queueLimit: 1, removeAfterUpload: true}); $ scope. clearItems = function () {// when you reselect a file, clear the queue to overwrite the file. uploader. clearQueue ();} $ scope. clearItems1 = function () {uploader1.clearQueue ();} uploader. onAfterAddingFile = function (fileItem) {$ scope. fileItem = fileItem. _ file; // after adding a file, assign the file information to scope}; uploader1.onAfterAddingFile = function (fileItem) {$ scope. fileItem1 = fileItem. _ fi Le; // after adding a file, assign the file information to the scope // you can determine whether the added file name suffix and file size meet the requirements. }; Uploader. onSuccessItem = function (fileItem, response, status, headers) {$ scope. uploadStatus = true; // If the upload is successful, 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 ('uploaded successfully! ');} Else {alert ('Certificate successful! Private Key failed! ') ;}} Else {if (status1) {alert ('private key successful! Certificate failed! ');} Else {alert ('upload failed! ') ;}}}])

Summary
In the above example, I defined two upload objects because I want to upload two files. Each time I re-select a file, I should overwrite the selected files. Therefore, if I define an object, it is a bit difficult to override the position, and when defining two objects, you can completely clear the file queue of the current object and then add it when re-selecting.

In fact, I found that two upload objects can also be not defined, because this plug-in provides a removeFromQueue (index) method, which is the index value of the file in the file queue array. Because the file is selected twice, the length is limited to 2. Then, this method is called every time you select the file. It is enough to input 0 or 1 based on the position.

To select multiple files in the same window, addYou can.

To limit the file type, you can use.

Accept value type list:

* 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 many configuration parameters, object methods, and callback functions.

The above is an introduction to the use of AngularJS File Upload controls. I hope this will be helpful for your learning.