Upload image/File function in Angularjs: ng-file-upload

Source: Internet
Author: User

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 &Lt;/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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.