AngularJS 文件上传工具 angular-file-upload

叁歲伎倆 2022-05-20 08:35 412阅读 0赞

angular-file-upload 详细介绍

angular-file-upload 是一款轻量级的 AngularJS 文件上传工具，为不支持浏览器的 FileAPI polyfill 设计，使用 HTML5 直接进行文件上传。

[在线演示][Link 1]

## 特性 ##

*  支持上传进度，在上传的时候，可以取消或者中止，支持文件拖拽（HTML5），目录拖拽（weikit），CORS， `PUT(html5)`/`POST` 方法
 *  支持使用 Flash polyfill [FileAPI][]  跨浏览器上传 (`HTML5` 和 `non-HTML5`) 。允许客户端在上传之前验证或者修改文件。
 *  当文件的内容类型使用 `$upload.http()`时，支持直接上传到 CouchDB，imgur 等等。支持 Angular http `POST`/`PUT`请求的进度事件，更多内容请看 [\#88(comment)][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 is still needed for `progress` event in `HTML5` browsers)
 *  轻量级，使用常规的 `$http` 来上传（支持非 HTML5 浏览器），所以提供所有 Angular `$http` 功能

## 使用 ##

HTML:

drop files here  HTML5 Drop File is not supported!  Cancel Upload

JS:

//inject angular file upload directives and service.angular.module('myApp', ['angularFileUpload']);var MyCtrl = [ '$scope', '$upload', function($scope, $upload) { 
      $scope.onFileSelect = function($files) {    //$files: an array of files selected, each file has name, size, and type.
        for (var i = 0; i < $files.length; i++) {      var file = $files[i];
          $scope.upload = $upload.upload({
            url: 'server/upload/url', //upload.php script, node.js route, or servlet url
            //method: 'POST' or 'PUT',
            //headers: {'header-key': 'header-value'},
            //withCredentials: true,
            data: {myObj: $scope.myModelObj},
            file: file, // or list of files ($files) for html5 only
            //fileName: 'doc.jpg' or ['1.jpg', '2.jpg', ...] // to modify the name of the file(s)
            // customize file formData name ('Content-Disposition'), server side file variable name. 
            //fileFormDataName: myFile, //or a list of names for multiple files (html5). Default is 'file' 
            // customize how data is added to formData. See #40#issuecomment-28612000 for sample code
            //formDataAppender: function(formData, key, val){}
          }).progress(function(evt) {        console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
          }).success(function(data, status, headers, config) {        // file is uploaded successfully
            console.log(data);
          });      //.error(...)
          //.then(success, error, progress); 
          // access or attach event listeners to the underlying XMLHttpRequest.
          //.xhr(function(xhr){xhr.upload.addEventListener(...)})
        }    /* alternative way of uploading, send the file binary with the file's content-type.       Could be used to upload files to CouchDB, imgur, etc... html5 FileReader is needed.        It could also be used to monitor the progress of a normal http post/put request with large data*/
        // $scope.upload = $upload.http({...})  see 88#issuecomment-31366487 for sample code.
      };
    }];

[Link 1]: https://angular-file-upload.appspot.com/
[FileAPI]: https://github.com/mailru/FileAPI
[88_comment]: https://github.com/danialfarid/angular-file-upload/issues/88#issuecomment-31366487