AngularJS File Upload Control ng-file-upload

Last Update:2016-06-03 Source: Internet

Author: User

Tags http post

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

There are two AngularJS file upload controls that can be found online:
Angular-file-upload:https://github.com/nervgh/angular-file-upload
Ng-file-upload:https://github.com/danialfarid/ng-file-upload

These two are very similar, even the structure of the JS file is the same. The core JS is. Min.js, also has a-shim.min.js, used to support the upload progress bar and upload pause and other advanced features.

According to reason Shim.js should be added can not add, but the measured-shim.min.js must be included, otherwise there is JS file loading problem. But angular-file-upload-shim.min.js this file does not exist on GitHub!!!

So use ng-file-upload!. With ng-file-upload! With ng-file-upload!

Angular-file-upload is a lightweight AngularJS file Upload tool designed for FILEAPI Polyfill that do not support browsers, using HTML5 to upload files directly.

Characteristics

Support upload progress, when uploading, can cancel or abort, support file drag (HTML5), directory drag (Weikit), CORS, PUT (HTML5)/post method

Supports the use of Flash polyfill Fileapi cross-browser uploads (HTML5 and NON-HTML5). Allows the client to verify or modify the file before uploading.

When the content type of a file is used $upload. HTTP (), support is uploaded directly to Couchdb,imgur and so on. Support for Progress events for Angular HTTP POST/PUT requests

Lightweight, use regular $http to upload (support non-HTML5 browser), so provide all Angular $http functions

Example

<!DOCTYPE HTML><HTMLNg-app= "App"><Head>    <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"/>    <title>File Upload</title>    <MetaCharSet= "Utf-8"/>    <Scriptsrc= "Js/angular.min.js"></Script>    <Scriptsrc= "Js/ng-file-upload.min.js"></Script>    <Scriptsrc= "Js/ng-file-upload-shim.min.js"></Script>    <Script>        varapp=Angular.module ('app', ['Ngfileupload']); App.controller ('Filecontroller', function($scope, Upload) {$scope. uploadimg= "'; //Submit$scope. Submit= function() {$scope. Upload ($scope. file);            }; $scope. Upload= function(file) {$scope. FileInfo=file; Upload.upload ({//Service-side receiveURL:'ashx/uploadfile.ashx',                    //upload the parameters with the same timedata: {'username': $scope. Username},//uploaded FilesFile:file}). Progress (function(evt) {//progress bar                    varProgresspercentage=parseint (100.0 *evt.loaded/evt.total); Console.log ('progess:' +Progresspercentage+ '%' +evt.config.file.name); }). Success (function(data, status, headers, config) {//Upload SuccessfulConsole.log ('file' +Config.file.name+ 'uploaded. Response:' +data); $scope. Uploadimg=data; }). Error (function(data, status, headers, config) {//Upload failedConsole.log ('Error Status:' +status);            });        };    }); </Script></Head><Body>    <formNg-controller= "Filecontroller">        <imgsrc= "{{uploadimg}}"/>currently uploading users:<inputtype= "text"placeholder= "Please enter your name"name= "Name"Ng-model= "username"/>        <Divclass= "button"Ngf-select Ng-model= "File"name= "File"Ngf-pattern= "' image/*"Accept= "image/*"ngf-max-size= "20MB"Ngf-min-height= "+">Select</Div>        <Buttontype= "Submit"Ng-click= "Submit ()">Submit</Button>{{Fileinfo.name}}<BR/>{{fileinfo.size}}</form></Body></HTML>

This is the front-end page, the backend if the Java words can be used commons-fileupload and other files upload class library.

Attention

If the backend uses a framework such as struts, the framework's filter automatically handles the uploaded file portion of the HTTP request, resulting in the requested file data not being fetched in the servlet.

The workaround is to change the struts configuration file, changing the file upload filter to a blank filter that we wrote ourselves

Solution Two is like submit a form form with <input type= "File" >, let struts automatically get the uploaded file. Just add a property of type file to the servlet and join the Get/set method. The name of the property must be file!!!.

AngularJS File Upload Control ng-file-upload

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More