Original Technology exchange:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angularjs-ng-file-upload/
In the process of doing the site will inevitably encounter upload images or upload the file function, using ANGULARJ implementation can use ANGULARJS ng-file-upload this library.
Support for uploading files (I've used Excel uploads so far, just like uploading pictures)
Support Single image upload
Support Multiple image uploads
Support drag and drop image upload
1.Install Installation Reference
-
Manual: You can download the latest JS library from here
-
Bower Installation:
bower install Ng-file-upload-shim--save (for non HTML5 suppport)
bower install ng-file-upload--save
-
nuget:pm> install-package angular-file-upload
-
NPM:NPM Install ng-file-upload
<script src= "angular (. min). js" ></script><script src= "Ng-file-upload-shim (. min). js" ></script > <!--for no HTML5 browsers support--><script src= "Ng-file-upload (. min). js" ></script>
2.Usage usage
(1) Single image upload
650) this.width=650; "src=" Http://common.cnblogs.com/images/copycode.gif "alt=" Copy Code "style=" margin:0px;padding:0px ; border:none; "/>
image-upload.html://Display the selected picture <div class= "button" ngf-select= "" ngf-pattern= "' image/* '" ngf-multiple= "false" ng-model= "Data.file" > select File </div><button ng-click= "Upload ()" >upload</button> image-upload-ctrl.js: $scope. data = { file: null};$ scope.upload = function () { if (! $scope. Data.file) { return; } var url = $scope. Params.url; //params is the Model pass parameter, image upload interface Url var data = angular.copy ($scope. params.data | | {}); // interface requires additional parameters, such as specifying which user the uploaded image belongs to: { userid: 78 } Data.file = $scope. Data.file; upload.upload ({ url: url, data: data }). Success (function (data) { $scope. Hide (data); }). Error (function () { Logger.log (' error '); });
650) this.width=650; "src=" Http://common.cnblogs.com/images/copycode.gif "alt=" Copy Code "style=" margin:0px;padding:0px ; border:none; "/>
(2) Multiple images upload
650) this.width=650; "src=" Http://common.cnblogs.com/images/copycode.gif "alt=" Copy Code "style=" margin:0px;padding:0px ; border:none; "/>
<div class= "button" ngf-select ngf-pattern= "' image/* '" ng-model= "files" Ngf-multiple= "True" > select multiple pictures </div> //ngf-multiple control whether multiple images can be uploaded // for multiple files: $scope .upload = function (Files) { if (files && files.length) { for (var i = 0; i < files.length; i++) { upload.upload ({..., &NBSP;DATA:&NBSP;{FILE:&NBSP;FILES[I]},&NBSP, ...}) ...; } // or send them all together for HTML5 browsers: upload.upload ({..., data: {file: files}, ...}) ...; } }
650) this.width=650; "src=" Http://common.cnblogs.com/images/copycode.gif "alt=" Copy Code "style=" margin:0px;padding:0px ; border:none; "/>
(3) Drop single image
650) this.width=650; "src=" Http://common.cnblogs.com/images/copycode.gif "alt=" Copy Code "style=" margin:0px;padding:0px ; border:none; "/>
image-upload.html:<button class= "Btn btn-default" ngf-select= "" ngf-pattern= "' image/* '" ng-model= "Data.file" ngf-multiple= "false" > Select Image </button><span> (Support drag-and-drop single image upload) </span> <div ngf-drop ngf-pattern= "' image/* '" ng-model= "Data.file" class= "Croparea" > < Img-crop image= "data.file| | data.defaultimage " resule-image=" Data.file "></img-crop> <div class= "Col col-sm-4 text-left" > </div></div> <button class= "Btn btn-primary" ng-click= "Upload ()" > Start uploading ≪/button> style.css:.croparea { background: #E4E4E4; min-height: 230px; height: auto; margin: 15px; margin-right: 0;}
650) this.width=650; "src=" Http://common.cnblogs.com/images/copycode.gif "alt=" Copy Code "style=" margin:0px;padding:0px ; border:none; "/>
(4) Drop and Select multiple images upload
650) this.width=650; "src=" Http://common.cnblogs.com/images/copycode.gif "alt=" Copy Code "style=" margin:0px;padding:0px ; border:none; "/>
image-upload.html:<button class= "Btn btn-default" ngf-select= "SelectImage ($files)" ngf-pattern= "' image/* '" ngf-multiple= "true" > Select Picture </button><span> (support multiple images drag and drop upload) </span><div class= "Row croparea" style= "padding: 0 15px 15px 0" ngf-drop ngf-pattern= "' image/* '" ng-model= "Files" ngf-multiple= "true" > </img-crop> <div Ngf-no-file-drop> The browser does not support drag-and-drop uploads. </div> <div class= "Col col-xs-4 text-left" style= " margin-top: 15px; " ng-repeat= "Image in mulimages" > <div ng-repeat= "Oneimage in image" > </div> </div></div >//</img-crop> defines the location where the picture can be dragged// arrange to display multiple images uploaded style.css:.croparea { background: #E4E4E4; min-height: 230px; height: auto; margin: 15px; margin-right: 0;} Image-upload-ctrl.js: $scope .data = { file: null, defaultimage: commonsvc.defaultimage}; $scope .mulimages = []; $scope. $watch (' Files ', function () { $scope. Selectimage ($scope. files); /According to the selected picture to determine whether is a sudden selection of multiple//suddenly select multiple data format for an array has more than one object, and only select one at a time the data format for an array has an object $scope.selectimage = function (Files) { if (!files | | !files.length) { return; } if (files.length > 1) { angular.foreach (files, function (item) { var image = []; image.push (item); $scope. Mulimages.push (image); }) } else { $scope. Mulimages.push (Files); }}; $scope .upload = function () { if (! $scope. Mulimages.length) { return; } var url = $scope .params.url; var data = Angular.copy ($scope. params.data | | {}); data.file = $scope. mulimages; upload.upload ({ url: url, data: data }). Success (function (data) { $scope. Hide (data); $rootScope. Alert (' Success '); error (function () { $rootScope. Alert (' Error '); });
650) this.width=650; "src=" Http://common.cnblogs.com/images/copycode.gif "alt=" Copy Code "style=" margin:0px;padding:0px ; border:none; "/>
These are some of the features I need to do in the project, perhaps not the full functionality of the library, and if you have additional requirements, you can view the official GitHub documentation: Https://github.com/danialfarid/ng-file-upload
This article is from the "11140155" blog, please be sure to keep this source http://11150155.blog.51cto.com/11140155/1759062
Upload image/File function in Angularjs: ng-file-upload