Home > Developer > Web Develop
Recently in the H5 version of the document library, we looked for the next related upload components, found the Ng-upload, recommended to everyone.
Series Articles[Angularjs]ng-select and Ng-options
[Angularjs]ng-show and Ng-hide
[Angularjs] View and Route (i)
[Angularjs] View and Routing (ii)
[Angularjs] views and routes (iii)
[Angularjs] views and routes (iv)
[Angularjs]ng-class,ng-class-even,ng-class-odd
[Angularjs] page of one-page application
[Angularjs] Internationalization
[Problems with Ng-model in Angularjs]ng-repeat
[Angularjs] Filter
[Angularjs]ng-file-upload Upload file
Ng-file-uploadAngular-file-upload is a lightweight AngularJS file Upload tool designed for FILEAPI Polyfill that do not support browsers, using HTML5 to upload files directly.
CharacteristicsSupport upload progress, when uploading, can cancel or abort, support file drag (HTML5), directory drag (Weikit), CORS, PUT(html5) / POST method
Supports uploading (and) across browsers using Flash Polyfill fileapi HTML5 non-HTML5 . Allows the client to verify or modify the file before uploading.
When the content type of the file is used $upload.http() , it supports uploading directly to Couchdb,imgur and so on. Support Angular http POST / PUT Request Progress events, see #88 (comment)
Separate shim file loaded on demand for non-HTML5 code meaning no extra load/code if you just need HTML5 support. (Note that Html5-shim.js was still needed for progress event in HTML5 browsers)
Lightweight, use regular $http to upload (support non-HTML5 browser), so provide all Angular $http functions.
Need the JS file, can go here to download: https://github.com/danialfarid/ng-file-upload
<!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}, File: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>
Simple test
Where data is stored for us to upload files at the same time, the required parameters.
For a complete example, upload successfully and preview on the page.
Public classUploadfile:ihttphandler { Public voidProcessRequest (HttpContext context) {context. Response.ContentType="Application/json"; varParas = context. request.params["Data"]; Jobject jobj=Jobject.parse (paras); stringstrUserName = jobj["username"]. ToString (); Httpfilecollection Files=context. Request.Files; if(Files. Count >0) { varFile = files[0]; stringFileext =path.getextension (file. FileName); stringFilenewname = Guid.NewGuid () +Fileext; stringStrrelativedir ="/upload/"+strUserName; stringStrdir =context. Request.mappath (Strrelativedir); if(!directory.exists (Strdir)) {directory.createdirectory (Strdir); } stringStrsavepath =Path.Combine (Strdir, filenewname); File. SaveAs (Strsavepath); Context. Response.Write (Path.Combine (Strrelativedir, filenewname)); } } Public BOOLisreusable {Get { return false; } } }
Summarize
The use of Ng-file-upload can be well combined with ANGULARJS. When using, looked for the Angularjs related file Upload example, if the browser supports HTML5, it can also be very convenient to make progress bar, and the component also supports multi-file upload. Recommend to everyone.
You can go here to download: https://github.com/danialfarid/ng-file-upload
[Angularjs]ng-file-upload Upload file
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
