深究angularJS——（上传）FileUploader中文翻译

淡淡的烟草味﹌ 2022-09-21 05:43 215阅读 0赞

**翻译** : 张春玲  
**博客**：[http://blog.csdn.net/zcl\_love\_wx][http_blog.csdn.net_zcl_love_wx]  
转载请注明出处

# **1.相关网址** #

**官网**：[http://www.bootcdn.cn/angular-file-upload/readme/][http_www.bootcdn.cn_angular-file-upload_readme]  
**API** ： [https://github.com/nervgh/angular-file-upload/wiki/Module-API][https_github.com_nervgh_angular-file-upload_wiki_Module-API]  
**插件**：  
**示例**：[http://nervgh.github.io/pages/angular-file-upload/examples/simple/][http_nervgh.github.io_pages_angular-file-upload_examples_simple]

# **2. 官网API翻译** #

## **2.1 指令** ##

### 2.1.1 nv-file-drop ###

<element nv-file-drop uploader="{FileUploader}"></element>
    
    <element nv-file-drop uploader="{FileUploader}" options="{Object}" filters="{String}"></element>

**uploader** 属性必须是FileUploader的实例  
**options** 属性可以是FileItem选项，也可以是自定义属性  
**filters** 属性可以是用逗号隔开的过滤器名字组成的字符串，如：’filterName1, filterName2’，这些过滤器的名字必须事先定义好：

uploader.filters.push({ name:'filterName1', fn:function() { /* your code here */}});
    uploader.filters.push({ name:'filterName2', fn:function() { /* your code here */}});

### 2.1.2 nv-file-select ###

<input type="file" nv-file-select uploader="{FileUploader}"/>
    
    <input type="file" nv-file-select uploader="{FileUploader}" options="{Object}" filters="{String}"/>

### 2.1.3 nv-file-over ###

<element nv-file-over uploader="{FileUploader}"></element>
    
    <element nv-file-over uploader="{FileUploader}" over-class="{String}"></element>

## **2.2 服务** ##

**FileUploader**

## **2.3 内容讲解** ##

### **2.3.1 FileUploader** ###

--------------------

## 属性 ##

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>url</strong></td> 
   <td>String</td> 
   <td>上传文件的服务器路径地址</td> 
  </tr> 
  <tr> 
   <td><strong>alias</strong></td> 
   <td>String</td> 
   <td>接收文件的字段名，默认为”file”</td> 
  </tr> 
  <tr> 
   <td><strong>queue</strong></td> 
   <td>Array</td> 
   <td>要被上传的文件组成的队列（项目），可理解成集合</td> 
  </tr> 
  <tr> 
   <td><strong>progress</strong></td> 
   <td>Number</td> 
   <td>队列上传的百分比，该属性只读</td> 
  </tr> 
  <tr> 
   <td><strong>headers</strong></td> 
   <td>Object</td> 
   <td>与文件一起发送的头文件,只适合支持html5的浏览器</td> 
  </tr> 
  <tr> 
   <td><strong>formData</strong></td> 
   <td>Array</td> 
   <td>与文件一起发送的数据</td> 
  </tr> 
  <tr> 
   <td><strong>filters</strong></td> 
   <td>Array</td> 
   <td>在将其添加到队列之前，将过滤器应用于文件。当过滤器返回true时，才该文件将被添加到队列中</td> 
  </tr> 
  <tr> 
   <td><strong>autoUpload</strong></td> 
   <td>Boolean</td> 
   <td>将文件添加到队列后自动上传</td> 
  </tr> 
  <tr> 
   <td><strong>method</strong></td> 
   <td>String</td> 
   <td>request请求方法。默认post。只适合支持HTML5的浏览器。</td> 
  </tr> 
  <tr> 
   <td><strong>removeAfterUpload</strong></td> 
   <td>Boolean</td> 
   <td>从队列上传后删除文件</td> 
  </tr> 
  <tr> 
   <td><strong>isHTML5</strong></td> 
   <td>Boolean</td> 
   <td>如果是支持HTML5浏览器上传为true,只读。</td> 
  </tr> 
  <tr> 
   <td><strong>isUploading</strong></td> 
   <td>Boolean</td> 
   <td>如果上传正在进行中为true,只读。</td> 
  </tr> 
  <tr> 
   <td><strong>queueLimit</strong></td> 
   <td>Number</td> 
   <td>最多上传的文件个数</td> 
  </tr> 
  <tr> 
   <td><strong>withCredentials</strong></td> 
   <td>Boolean</td> 
   <td>使其跨源资源共享。只适合支持HTML5的浏览器。</td> 
  </tr> 
 </tbody> 
</table>

## 方法 ##

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>传参与返回</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>addToQueue</strong></td> 
   <td>function(files[, options[, filters]]) {}</td> 
   <td>将项目添加到队列中，当文件是一个文件列表文件或单个文件或htmlinputelement，options是Object类型，过滤器是字符串。</td> 
  </tr> 
  <tr> 
   <td><strong>removeFromQueue</strong></td> 
   <td>function(value) {}</td> 
   <td>从队列中删除一个文件项目，value是文件对象或是该文件在队列里的下标（序列）。</td> 
  </tr> 
  <tr> 
   <td><strong>clearQueue</strong></td> 
   <td>function() {}</td> 
   <td>从队列中移除所有元素。</td> 
  </tr> 
  <tr> 
   <td><strong>uploadItem</strong></td> 
   <td>function(value) {}</td> 
   <td>上传队列中的一个文件，value既可以是文件对象，也可是该文件在队列中的下标。</td> 
  </tr> 
  <tr> 
   <td><strong>cancelItem</strong></td> 
   <td>function(value) {}</td> 
   <td>取消上传队列中的一个文件，value既可以是文件对象，也可是该文件在队列中的下标。</td> 
  </tr> 
  <tr> 
   <td><strong>uploadAll</strong></td> 
   <td>function() {}</td> 
   <td>上传所有正在排队的待定项</td> 
  </tr> 
  <tr> 
   <td><strong>cancelAll</strong></td> 
   <td>function() {}</td> 
   <td>取消当前所有的上传</td> 
  </tr> 
  <tr> 
   <td><strong>destroy</strong></td> 
   <td>function() {}</td> 
   <td>破坏一个上传。</td> 
  </tr> 
  <tr> 
   <td><strong>isFile</strong></td> 
   <td>function(value) { <strong>return</strong> {Boolean};}</td> 
   <td>如果是文件对象就返回true</td> 
  </tr> 
  <tr> 
   <td><strong>isFileLikeObject</strong></td> 
   <td>function(value) { <strong>return</strong> {Boolean};}</td> 
   <td>如果是FileLikeObject就返回。这是个啥？没用过。</td> 
  </tr> 
  <tr> 
   <td><strong>getIndexOfItem</strong></td> 
   <td>function({FileItem}) { <strong>return</strong> {Number};}</td> 
   <td>返回文件对象在队列里的下标。</td> 
  </tr> 
  <tr> 
   <td><strong>getReadyItems</strong></td> 
   <td>function() { <strong>return</strong> { <code>Array.&lt;FileItems&gt;</code>};}</td> 
   <td>返回准备好上传的所有文件对象</td> 
  </tr> 
  <tr> 
   <td><strong>getNotUploadedItems</strong></td> 
   <td>function() { <strong>return</strong> { <code>Array.&lt;FileItems&gt;</code>};}</td> 
   <td>返回队列中所有等待上传的文件对象组成的数组。</td> 
  </tr> 
 </tbody> 
</table>

## 回调 ##

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>传参与返回</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>onAfterAddingFile</strong></td> 
   <td>function(item) {}</td> 
   <td>向队列中添加一个单独的文件后触发</td> 
  </tr> 
  <tr> 
   <td><strong>onWhenAddingFileFailed</strong></td> 
   <td>function(item, filter, options) {}</td> 
   <td>添加一个文件失败后触发</td> 
  </tr> 
  <tr> 
   <td><strong>onAfterAddingAll</strong></td> 
   <td>function(addedItems) {}</td> 
   <td>在所有被拖拽或被选中的文件添加到队列后触发。</td> 
  </tr> 
  <tr> 
   <td><strong>onBeforeUploadItem</strong></td> 
   <td>function(item) {}</td> 
   <td>在上传一个文件对象之前触发。</td> 
  </tr> 
  <tr> 
   <td><strong>onProgressItem</strong></td> 
   <td>function(item, progress) {}</td> 
   <td>On file upload progress.</td> 
  </tr> 
  <tr> 
   <td><strong>onSuccessItem</strong></td> 
   <td>function(item, response, status, headers) {}</td> 
   <td>一个文件上传成功后触发</td> 
  </tr> 
  <tr> 
   <td><strong>onErrorItem</strong></td> 
   <td>function(item, response, status, headers) {}</td> 
   <td>上传出错时触发</td> 
  </tr> 
  <tr> 
   <td><strong>onCancelItem</strong></td> 
   <td>function(item, response, status, headers) {}</td> 
   <td>取消上传时触发</td> 
  </tr> 
  <tr> 
   <td><strong>onCompleteItem</strong></td> 
   <td>function(item, response, status, headers) {}</td> 
   <td>在文件上传完成时触发（独立操作成功）</td> 
  </tr> 
  <tr> 
   <td><strong>onProgressAll</strong></td> 
   <td>function(progress) {}</td> 
   <td>关于上传队列的进展</td> 
  </tr> 
  <tr> 
   <td><strong>onCompleteAll</strong></td> 
   <td>function() {}</td> 
   <td>上传一个完整的队列时加载所有的文件，或上传一个单独的文件时加载该文件时触发。</td> 
  </tr> 
 </tbody> 
</table>

### **2.3.2 FileItem** ###

--------------------

## 属性 ##

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>url</strong></td> 
   <td>String</td> 
   <td>上传该文件的服务器路径地址</td> 
  </tr> 
  <tr> 
   <td><strong>alias</strong></td> 
   <td>String</td> 
   <td>接收该文件的字段名，默认为”file”</td> 
  </tr> 
  <tr> 
   <td><strong>headers</strong></td> 
   <td>Object</td> 
   <td>与该文件一起发送的头文件,只适合支持html5的浏览器</td> 
  </tr> 
  <tr> 
   <td><strong>formData</strong></td> 
   <td>Array</td> 
   <td>与该文件一起发送的数据</td> 
  </tr> 
  <tr> 
   <td><strong>method</strong></td> 
   <td>String</td> 
   <td>request请求方法。默认post。只适合支持HTML5的浏览器。</td> 
  </tr> 
  <tr> 
   <td><strong>withCredentials</strong></td> 
   <td>Boolean</td> 
   <td>使其跨源资源共享。只适合支持HTML5的浏览器。</td> 
  </tr> 
  <tr> 
   <td><strong>removeAfterUpload</strong></td> 
   <td>Boolean</td> 
   <td>从队列上传后删除该文件</td> 
  </tr> 
  <tr> 
   <td><strong>index</strong></td> 
   <td>Number</td> 
   <td>该文件的上传序列。只读。</td> 
  </tr> 
  <tr> 
   <td><strong>progress</strong></td> 
   <td>Number</td> 
   <td>文件上传的百分比，该属性只读</td> 
  </tr> 
  <tr> 
   <td><strong>isReady</strong></td> 
   <td>Boolean</td> 
   <td>文件是否做准备好上传，只读。</td> 
  </tr> 
  <tr> 
   <td><strong>isUploading</strong></td> 
   <td>Boolean</td> 
   <td>如果该文件正在上传中为true,只读。</td> 
  </tr> 
  <tr> 
   <td><strong>isUploaded</strong></td> 
   <td>Boolean</td> 
   <td>如果该文件已经上传了，则为true。只读。</td> 
  </tr> 
  <tr> 
   <td><strong>isSuccess</strong></td> 
   <td>Boolean</td> 
   <td>如果该文件已经上传成功了，则为true。只读.</td> 
  </tr> 
  <tr> 
   <td><strong>isCancel</strong></td> 
   <td>Boolean</td> 
   <td>如果上传被取消为true。只读。</td> 
  </tr> 
  <tr> 
   <td><strong>isError</strong></td> 
   <td>Boolean</td> 
   <td>如果上传出现错误为true。只读。</td> 
  </tr> 
  <tr> 
   <td><strong>uploader</strong></td> 
   <td>Object</td> 
   <td>些文件参考父上传对象。只读。</td> 
  </tr> 
 </tbody> 
</table>

## 方法 ##

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>传参与返回</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>remove</strong></td> 
   <td>function() {}</td> 
   <td>从队列中删除此文件</td> 
  </tr> 
  <tr> 
   <td><strong>upload</strong></td> 
   <td>function() {}</td> 
   <td>上传此文件</td> 
  </tr> 
  <tr> 
   <td><strong>cancel</strong></td> 
   <td>function() {}</td> 
   <td>取消上传此文件</td> 
  </tr> 
 </tbody> 
</table>

## 回调 ##

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>传参与返回</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>onBeforeUpload</strong></td> 
   <td>function() {}</td> 
   <td>上传某个项目（文件）之前触发</td> 
  </tr> 
  <tr> 
   <td><strong>onProgress</strong></td> 
   <td>function(progress) {}</td> 
   <td>On file upload progress.</td> 
  </tr> 
  <tr> 
   <td><strong>onSuccess</strong></td> 
   <td>function(response, status, headers) {}</td> 
   <td>上传成功后触发</td> 
  </tr> 
  <tr> 
   <td><strong>onError</strong></td> 
   <td>function(response, status, headers) {}</td> 
   <td>上传出错时触发</td> 
  </tr> 
  <tr> 
   <td><strong>onCancel</strong></td> 
   <td>function(response, status, headers) { }</td> 
   <td>取消上传时触发</td> 
  </tr> 
  <tr> 
   <td><strong>onComplete</strong></td> 
   <td>function(response, status, headers) {}</td> 
   <td>在文件上传完成时触发（独立操作成功）</td> 
  </tr> 
 </tbody> 
</table>

### **2.3.3 Filters** ###

注入过滤器的两种方式:

--------------------

## 已定义好的过滤器 ##

--------------------

**folder**  
**queueLimit**

--------------------

# **3. 示例** #

## 3.1 html页面代码 ##

<input type="file" nv-file-select="" uploader="uploader" multiple="">

## 3.2 JS代码 ##

'use strict';
    angular
        .module('app', ['angularFileUpload'])
        .controller('AppController', ['$scope', 'FileUploader', function($scope, FileUploader) { 
            //选择文件并创建文件对象有
            var uploader = $scope.uploader = new FileUploader({
                url: 'upload.php'
            });
    
            // 过滤器
            uploader.filters.push({
                name: 'customFilter',
                fn: function(item /*{File|FileLikeObject}*/, options) { 
                    return this.queue.length < 10;
                }
            });
    
            // 回调
            uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) { 
                console.info('onWhenAddingFileFailed', item, filter, options);
            };
            uploader.onAfterAddingFile = function(fileItem) { 
                console.info('onAfterAddingFile', fileItem);
            };
            uploader.onAfterAddingAll = function(addedFileItems) { 
                console.info('onAfterAddingAll', addedFileItems);
            };
            uploader.onBeforeUploadItem = function(item) { 
                console.info('onBeforeUploadItem', item);
            };
            uploader.onProgressItem = function(fileItem, progress) { 
                console.info('onProgressItem', fileItem, progress);
            };
            uploader.onProgressAll = function(progress) { 
                console.info('onProgressAll', progress);
            };
            uploader.onSuccessItem = function(fileItem, response, status, headers) { 
                console.info('onSuccessItem', fileItem, response, status, headers);
            };
            uploader.onErrorItem = function(fileItem, response, status, headers) { 
                console.info('onErrorItem', fileItem, response, status, headers);
            };
            uploader.onCancelItem = function(fileItem, response, status, headers) { 
                console.info('onCancelItem', fileItem, response, status, headers);
            };
            uploader.onCompleteItem = function(fileItem, response, status, headers) { 
                console.info('onCompleteItem', fileItem, response, status, headers);
            };
            uploader.onCompleteAll = function() { 
                console.info('onCompleteAll');
            };
    
            console.info('uploader', uploader);
        }]);

# **4.只能上传图片的过滤器** #

uploader.filters.push({
         name: 'imageFilter',
          fn: function(item /*{File|FileLikeObject}*/, options) {
              var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';
              return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
          }
      });

# **5.插件代码** #

如果没下载到插件，可复制 里的代码

/* angular-file-upload v2.1.3 https://github.com/nervgh/angular-file-upload */
    
    !function(e,t){ "object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):"object"==typeof exports?exports["angular-file-upload"]=t():e["angular-file-upload"]=t()}(this,function(){ return function(e){ function t(r){ if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return e[r].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){ "use strict";var r=function(e){ return e&&e.__esModule?e["default"]:e},i=r(n(2)),o=r(n(3)),s=r(n(4)),a=r(n(5)),u=r(n(6)),l=r(n(7)),c=r(n(1)),f=r(n(8)),p=r(n(9)),d=r(n(10)),v=r(n(11)),h=r(n(12));angular.module(i.name,[]).value("fileUploaderOptions",o).factory("FileUploader",s).factory("FileLikeObject",a).factory("FileItem",u).factory("FileDirective",l).factory("FileSelect",c).factory("FileDrop",f).factory("FileOver",p).directive("nvFileSelect",d).directive("nvFileDrop",v).directive("nvFileOver",h).run(["FileUploader","FileLikeObject","FileItem","FileDirective","FileSelect","FileDrop","FileOver",function(e,t,n,r,i,o,s){ e.FileLikeObject=t,e.FileItem=n,e.FileDirective=r,e.FileSelect=i,e.FileDrop=o,e.FileOver=s}])},function(e,t,n){ "use strict";var r=function(e){ return e&&e.__esModule?e["default"]:e},i=function(){ function e(e,t){ for(var n in t){
       var r=t[n];r.configurable=!0,r.value&&(r.writable=!0)}Object.defineProperties(e,t)}return function(t,n,r){ return n&&e(t.prototype,n),r&&e(t,r),t}}(),o=function l(e,t,n){ var r=Object.getOwnPropertyDescriptor(e,t);if(void 0===r){
       var i=Object.getPrototypeOf(e);return null===i?void 0:l(i,t,n)}if("value"in r&&r.writable)return r.value;var o=r.get;return void 0===o?void 0:o.call(n)},s=function(e,t){ if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(e.__proto__=t)},a=function(e,t){ if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},u=(r(n(2)),angular.extend);e.exports=function(e){ var t=function(e){ function t(e){ a(this,t);var n=u(e,{events:{$destroy:"destroy",change:"onChange"},prop:"select"});o(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,n),this.uploader.isHTML5||this.element.removeAttr("multiple"),this.element.prop("value",null)}return s(t,e),i(t,{getOptions:{value:function(){ }},getFilters:{value:function(){ }},isEmptyAfterSelection:{value:function(){ return!!this.element.attr("multiple")}},onChange:{value:function(){ var e=this.uploader.isHTML5?this.element[0].files:this.element[0],t=this.getOptions(),n=this.getFilters();this.uploader.isHTML5||this.destroy(),this.uploader.addToQueue(e,t,n),this.isEmptyAfterSelection()&&this.element.prop("value",null)}}}),t}(e);return t},e.exports.$inject=["FileDirective"]},function(e,t){ e.exports={name:"angularFileUpload"}},function(e,t){ "use strict";e.exports={url:"/",alias:"file",headers:{},queue:[],progress:0,autoUpload:!1,removeAfterUpload:!1,method:"POST",filters:[],formData:[],queueLimit:Number.MAX_VALUE,withCredentials:!1}},function(e,t,n){ "use strict";var r=function(e){ return e&&e.__esModule?e["default"]:e},i=function(){ function e(e,t){ for(var n in t){
       var r=t[n];r.configurable=!0,r.value&&(r.writable=!0)}Object.defineProperties(e,t)}return function(t,n,r){ return n&&e(t.prototype,n),r&&e(t,r),t}}(),o=function(e,t){ if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},s=(r(n(2)),angular.copy),a=angular.extend,u=angular.forEach,l=angular.isObject,c=angular.isNumber,f=angular.isDefined,p=angular.isArray,d=angular.element;e.exports=function(e,t,n,r,v,h){ var m=r.File,g=r.FormData,_=function(){ function r(t){ o(this,r);var n=s(e);a(this,n,t,{isUploading:!1,_nextIndex:0,_failFilterIndex:-1,_directives:{select:[],drop:[],over:[]}}),this.filters.unshift({name:"queueLimit",fn:this._queueLimitFilter}),this.filters.unshift({name:"folder",fn:this._folderFilter})}return i(r,{addToQueue:{value:function(e,t,n){ var r=this,i=this.isArrayLikeObject(e)?e:[e],o=this._getFilters(n),s=this.queue.length,a=[];u(i,function(e){ var n=new v(e);if(r._isValidFile(n,o,t)){
       var i=new h(r,e,t);a.push(i),r.queue.push(i),r._onAfterAddingFile(i)}else{
       var s=o[r._failFilterIndex];r._onWhenAddingFileFailed(n,s,t)}}),this.queue.length!==s&&(this._onAfterAddingAll(a),this.progress=this._getTotalProgress()),this._render(),this.autoUpload&&this.uploadAll()}},removeFromQueue:{value:function(e){ var t=this.getIndexOfItem(e),n=this.queue[t];n.isUploading&&n.cancel(),this.queue.splice(t,1),n._destroy(),this.progress=this._getTotalProgress()}},clearQueue:{value:function(){ for(;this.queue.length;)this.queue[0].remove();this.progress=0}},uploadItem:{value:function(e){ var t=this.getIndexOfItem(e),n=this.queue[t],r=this.isHTML5?"_xhrTransport":"_iframeTransport";n._prepareToUploading(),this.isUploading||(this.isUploading=!0,this[r](n))}},cancelItem:{value:function(e){ var t=this.getIndexOfItem(e),n=this.queue[t],r=this.isHTML5?"_xhr":"_form";n&&n.isUploading&&n[r].abort()}},uploadAll:{value:function(){ var e=this.getNotUploadedItems().filter(function(e){ return!e.isUploading});e.length&&(u(e,function(e){ return e._prepareToUploading()}),e[0].upload())}},cancelAll:{value:function(){ var e=this.getNotUploadedItems();u(e,function(e){ return e.cancel()})}},isFile:{value:function(e){ return this.constructor.isFile(e)}},isFileLikeObject:{value:function(e){ return this.constructor.isFileLikeObject(e)}},isArrayLikeObject:{value:function(e){ return this.constructor.isArrayLikeObject(e)}},getIndexOfItem:{value:function(e){ return c(e)?e:this.queue.indexOf(e)}},getNotUploadedItems:{value:function(){ return this.queue.filter(function(e){ return!e.isUploaded})}},getReadyItems:{value:function(){ return this.queue.filter(function(e){ return e.isReady&&!e.isUploading}).sort(function(e,t){ return e.index-t.index})}},destroy:{value:function(){ var e=this;u(this._directives,function(t){ u(e._directives[t],function(e){ e.destroy()})})}},onAfterAddingAll:{value:function(e){ }},onAfterAddingFile:{value:function(e){ }},onWhenAddingFileFailed:{value:function(e,t,n){ }},onBeforeUploadItem:{value:function(e){ }},onProgressItem:{value:function(e,t){ }},onProgressAll:{value:function(e){ }},onSuccessItem:{value:function(e,t,n,r){ }},onErrorItem:{value:function(e,t,n,r){ }},onCancelItem:{value:function(e,t,n,r){ }},onCompleteItem:{value:function(e,t,n,r){ }},onCompleteAll:{value:function(){ }},_getTotalProgress:{value:function(e){ if(this.removeAfterUpload)return e||0;var t=this.getNotUploadedItems().length,n=t?this.queue.length-t:this.queue.length,r=100/this.queue.length,i=(e||0)*r/100;return Math.round(n*r+i)}},_getFilters:{value:function(e){ if(!e)return this.filters;if(p(e))return e;var t=e.match(/[^\s,]+/g);return this.filters.filter(function(e){ return-1!==t.indexOf(e.name)})}},_render:{value:function(){ t.$$phase||t.$apply()}},_folderFilter:{value:function(e){ return!(!e.size&&!e.type)}},_queueLimitFilter:{value:function(){ return this.queue.length<this.queueLimit}},_isValidFile:{value:function(e,t,n){ var r=this;return this._failFilterIndex=-1,t.length?t.every(function(t){ return r._failFilterIndex++,t.fn.call(r,e,n)}):!0}},_isSuccessCode:{value:function(e){ return e>=200&&300>e||304===e}},_transformResponse:{value:function(e,t){ var r=this._headersGetter(t);return u(n.defaults.transformResponse,function(t){ e=t(e,r)}),e}},_parseHeaders:{value:function(e){ var t,n,r,i={};return e?(u(e.split("\n"),function(e){ r=e.indexOf(":"),t=e.slice(0,r).trim().toLowerCase(),n=e.slice(r+1).trim(),t&&(i[t]=i[t]?i[t]+", "+n:n)}),i):i}},_headersGetter:{value:function(e){ return function(t){ return t?e[t.toLowerCase()]||null:e}}},_xhrTransport:{value:function(e){ var t=this,n=e._xhr=new XMLHttpRequest,r=new g;if(this._onBeforeUploadItem(e),u(e.formData,function(e){ u(e,function(e,t){ r.append(t,e)})}),"number"!=typeof e._file.size)throw new TypeError("The file specified is no longer valid");r.append(e.alias,e._file,e.file.name),n.upload.onprogress=function(n){ var r=Math.round(n.lengthComputable?100*n.loaded/n.total:0);t._onProgressItem(e,r)},n.onload=function(){ var r=t._parseHeaders(n.getAllResponseHeaders()),i=t._transformResponse(n.response,r),o=t._isSuccessCode(n.status)?"Success":"Error",s="_on"+o+"Item";t[s](e,i,n.status,r),t._onCompleteItem(e,i,n.status,r)},n.onerror=function(){ var r=t._parseHeaders(n.getAllResponseHeaders()),i=t._transformResponse(n.response,r);t._onErrorItem(e,i,n.status,r),t._onCompleteItem(e,i,n.status,r)},n.onabort=function(){ var r=t._parseHeaders(n.getAllResponseHeaders()),i=t._transformResponse(n.response,r);t._onCancelItem(e,i,n.status,r),t._onCompleteItem(e,i,n.status,r)},n.open(e.method,e.url,!0),n.withCredentials=e.withCredentials,u(e.headers,function(e,t){ n.setRequestHeader(t,e)}),n.send(r),this._render()}},_iframeTransport:{value:function(e){ var t=this,n=d('<form style="display: none;" />'),r=d('<iframe name="iframeTransport'+Date.now()+'">'),i=e._input;e._form&&e._form.replaceWith(i),e._form=n,this._onBeforeUploadItem(e),i.prop("name",e.alias),u(e.formData,function(e){ u(e,function(e,t){ var r=d('<input type="hidden" name="'+t+'" />');r.val(e),n.append(r)})}),n.prop({action:e.url,method:"POST",target:r.prop("name"),enctype:"multipart/form-data",encoding:"multipart/form-data"}),r.bind("load",function(){ var n="",i=200;try{n=r[0].contentDocument.body.innerHTML}catch(o){i=500}var s={response:n,status:i,dummy:!0},a={},u=t._transformResponse(s.response,a);t._onSuccessItem(e,u,s.status,a),t._onCompleteItem(e,u,s.status,a)}),n.abort=function(){ var o,s={status:0,dummy:!0},a={};r.unbind("load").prop("src","javascript:false;"),n.replaceWith(i),t._onCancelItem(e,o,s.status,a),t._onCompleteItem(e,o,s.status,a)},i.after(n),n.append(i).append(r),n[0].submit(),this._render()}},_onWhenAddingFileFailed:{value:function(e,t,n){ this.onWhenAddingFileFailed(e,t,n)}},_onAfterAddingFile:{value:function(e){ this.onAfterAddingFile(e)}},_onAfterAddingAll:{value:function(e){ this.onAfterAddingAll(e)}},_onBeforeUploadItem:{value:function(e){ e._onBeforeUpload(),this.onBeforeUploadItem(e)}},_onProgressItem:{value:function(e,t){ var n=this._getTotalProgress(t);this.progress=n,e._onProgress(t),this.onProgressItem(e,t),this.onProgressAll(n),this._render()}},_onSuccessItem:{value:function(e,t,n,r){ e._onSuccess(t,n,r),this.onSuccessItem(e,t,n,r)}},_onErrorItem:{value:function(e,t,n,r){ e._onError(t,n,r),this.onErrorItem(e,t,n,r)}},_onCancelItem:{value:function(e,t,n,r){ e._onCancel(t,n,r),this.onCancelItem(e,t,n,r)}},_onCompleteItem:{value:function(e,t,n,r){ e._onComplete(t,n,r),this.onCompleteItem(e,t,n,r);var i=this.getReadyItems()[0];return this.isUploading=!1,f(i)?void i.upload():(this.onCompleteAll(),this.progress=this._getTotalProgress(),void this._render())}}},{isFile:{value:function(e){ return m&&e instanceof m}},isFileLikeObject:{value:function(e){ return e instanceof v}},isArrayLikeObject:{value:function(e){ return l(e)&&"length"in e}},inherit:{value:function(e,t){ e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.super_=t}}}),r}();return _.prototype.isHTML5=!(!m||!g),_.isHTML5=_.prototype.isHTML5,_},e.exports.$inject=["fileUploaderOptions","$rootScope","$http","$window","FileLikeObject","FileItem"]},function(e,t,n){ "use strict";var r=function(e){ return e&&e.__esModule?e["default"]:e},i=function(){ function e(e,t){ for(var n in t){
       var r=t[n];r.configurable=!0,r.value&&(r.writable=!0)}Object.defineProperties(e,t)}return function(t,n,r){ return n&&e(t.prototype,n),r&&e(t,r),t}}(),o=function(e,t){ if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},s=(r(n(2)),angular.copy),a=angular.isElement,u=angular.isString;e.exports=function(){ var e=function(){ function e(t){ o(this,e);var n=a(t),r=n?t.value:t,i=u(r)?"FakePath":"Object",s="_createFrom"+i;this[s](r)}return i(e,{_createFromFakePath:{value:function(e){ this.lastModifiedDate=null,this.size=null,this.type="like/"+e.slice(e.lastIndexOf(".")+1).toLowerCase(),this.name=e.slice(e.lastIndexOf("/")+e.lastIndexOf("\\")+2)}},_createFromObject:{value:function(e){ this.lastModifiedDate=s(e.lastModifiedDate),this.size=e.size,this.type=e.type,this.name=e.name}}}),e}();return e},e.exports.$inject=[]},function(e,t,n){ "use strict";var r=function(e){ return e&&e.__esModule?e["default"]:e},i=function(){ function e(e,t){ for(var n in t){
       var r=t[n];r.configurable=!0,r.value&&(r.writable=!0)}Object.defineProperties(e,t)}return function(t,n,r){ return n&&e(t.prototype,n),r&&e(t,r),t}}(),o=function(e,t){ if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},s=(r(n(2)),angular.copy),a=angular.extend,u=angular.element,l=angular.isElement;e.exports=function(e,t){ var n=function(){ function n(e,r,i){ o(this,n);var c=l(r),f=c?u(r):null,p=c?null:r;a(this,{url:e.url,alias:e.alias,headers:s(e.headers),formData:s(e.formData),removeAfterUpload:e.removeAfterUpload,withCredentials:e.withCredentials,method:e.method},i,{uploader:e,file:new t(r),isReady:!1,isUploading:!1,isUploaded:!1,isSuccess:!1,isCancel:!1,isError:!1,progress:0,index:null,_file:p,_input:f}),f&&this._replaceNode(f)}return i(n,{upload:{value:function(){ try{
       this.uploader.uploadItem(this)}catch(e){
       this.uploader._onCompleteItem(this,"",0,[]),this.uploader._onErrorItem(this,"",0,[])}}},cancel:{value:function(){ this.uploader.cancelItem(this)}},remove:{value:function(){ this.uploader.removeFromQueue(this)}},onBeforeUpload:{value:function(){ }},onProgress:{value:function(e){ }},onSuccess:{value:function(e,t,n){ }},onError:{value:function(e,t,n){ }},onCancel:{value:function(e,t,n){ }},onComplete:{value:function(e,t,n){ }},_onBeforeUpload:{value:function(){ this.isReady=!0,this.isUploading=!0,this.isUploaded=!1,this.isSuccess=!1,this.isCancel=!1,this.isError=!1,this.progress=0,this.onBeforeUpload()}},_onProgress:{value:function(e){ this.progress=e,this.onProgress(e)}},_onSuccess:{value:function(e,t,n){ this.isReady=!1,this.isUploading=!1,this.isUploaded=!0,this.isSuccess=!0,this.isCancel=!1,this.isError=!1,this.progress=100,this.index=null,this.onSuccess(e,t,n)}},_onError:{value:function(e,t,n){ this.isReady=!1,this.isUploading=!1,this.isUploaded=!0,this.isSuccess=!1,this.isCancel=!1,this.isError=!0,this.progress=0,this.index=null,this.onError(e,t,n)}},_onCancel:{value:function(e,t,n){ this.isReady=!1,this.isUploading=!1,this.isUploaded=!1,this.isSuccess=!1,this.isCancel=!0,this.isError=!1,this.progress=0,this.index=null,this.onCancel(e,t,n)}},_onComplete:{value:function(e,t,n){ this.onComplete(e,t,n),this.removeAfterUpload&&this.remove()}},_destroy:{value:function(){ this._input&&this._input.remove(),this._form&&this._form.remove(),delete this._form,delete this._input}},_prepareToUploading:{value:function(){ this.index=this.index||++this.uploader._nextIndex,this.isReady=!0}},_replaceNode:{value:function(t){ var n=e(t.clone())(t.scope());n.prop("value",null),t.css("display","none"),t.after(n)}}}),n}();return n},e.exports.$inject=["$compile","FileLikeObject"]},function(e,t,n){ "use strict";var r=function(e){ return e&&e.__esModule?e["default"]:e},i=function(){ function e(e,t){ for(var n in t){
       var r=t[n];r.configurable=!0,r.value&&(r.writable=!0)}Object.defineProperties(e,t)}return function(t,n,r){ return n&&e(t.prototype,n),r&&e(t,r),t}}(),o=function(e,t){ if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},s=(r(n(2)),angular.extend);e.exports=function(){ var e=function(){ function e(t){ o(this,e),s(this,t),this.uploader._directives[this.prop].push(this),this._saveLinks(),this.bind()}return i(e,{bind:{value:function(){ for(var e in this.events){
       var t=this.events[e];this.element.bind(e,this[t])}}},unbind:{value:function(){ for(var e in this.events)this.element.unbind(e,this.events[e])}},destroy:{value:function(){ var e=this.uploader._directives[this.prop].indexOf(this);this.uploader._directives[this.prop].splice(e,1),this.unbind()}},_saveLinks:{value:function(){ for(var e in this.events){
       var t=this.events[e];this[t]=this[t].bind(this)}}}}),e}();return e.prototype.events={},e},e.exports.$inject=[]},function(e,t,n){ "use strict";var r=function(e){ return e&&e.__esModule?e["default"]:e},i=function(){ function e(e,t){ for(var n in t){
       var r=t[n];r.configurable=!0,r.value&&(r.writable=!0)}Object.defineProperties(e,t)}return function(t,n,r){ return n&&e(t.prototype,n),r&&e(t,r),t}}(),o=function c(e,t,n){ var r=Object.getOwnPropertyDescriptor(e,t);if(void 0===r){
       var i=Object.getPrototypeOf(e);return null===i?void 0:c(i,t,n)}if("value"in r&&r.writable)return r.value;var o=r.get;return void 0===o?void 0:o.call(n)},s=function(e,t){ if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(e.__proto__=t)},a=function(e,t){ if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},u=(r(n(2)),angular.extend),l=angular.forEach;e.exports=function(e){ var t=function(e){ function t(e){ a(this,t);var n=u(e,{events:{$destroy:"destroy",drop:"onDrop",dragover:"onDragOver",dragleave:"onDragLeave"},prop:"drop"});o(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,n)}return s(t,e),i(t,{getOptions:{value:function(){ }},getFilters:{value:function(){ }},onDrop:{value:function(e){ var t=this._getTransfer(e);if(t){
       var n=this.getOptions(),r=this.getFilters();this._preventAndStop(e),l(this.uploader._directives.over,this._removeOverClass,this),this.uploader.addToQueue(t.files,n,r)}}},onDragOver:{value:function(e){ var t=this._getTransfer(e);this._haveFiles(t.types)&&(t.dropEffect="copy",this._preventAndStop(e),l(this.uploader._directives.over,this._addOverClass,this))}},onDragLeave:{value:function(e){ e.currentTarget!==this.element[0]&&(this._preventAndStop(e),l(this.uploader._directives.over,this._removeOverClass,this))}},_getTransfer:{value:function(e){ return e.dataTransfer?e.dataTransfer:e.originalEvent.dataTransfer}},_preventAndStop:{value:function(e){ e.preventDefault(),e.stopPropagation()}},_haveFiles:{value:function(e){ return e?e.indexOf?-1!==e.indexOf("Files"):e.contains?e.contains("Files"):!1:!1}},_addOverClass:{value:function(e){ e.addOverClass()}},_removeOverClass:{value:function(e){ e.removeOverClass()}}}),t}(e);return t},e.exports.$inject=["FileDirective"]},function(e,t,n){ "use strict";var r=function(e){ return e&&e.__esModule?e["default"]:e},i=function(){ function e(e,t){ for(var n in t){
       var r=t[n];r.configurable=!0,r.value&&(r.writable=!0)}Object.defineProperties(e,t)}return function(t,n,r){ return n&&e(t.prototype,n),r&&e(t,r),t}}(),o=function l(e,t,n){ var r=Object.getOwnPropertyDescriptor(e,t);if(void 0===r){
       var i=Object.getPrototypeOf(e);return null===i?void 0:l(i,t,n)}if("value"in r&&r.writable)return r.value;var o=r.get;return void 0===o?void 0:o.call(n)},s=function(e,t){ if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(e.__proto__=t)},a=function(e,t){ if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},u=(r(n(2)),angular.extend);e.exports=function(e){ var t=function(e){ function t(e){ a(this,t);var n=u(e,{events:{$destroy:"destroy"},prop:"over",overClass:"nv-file-over"});o(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,n)}return s(t,e),i(t,{addOverClass:{value:function(){ this.element.addClass(this.getOverClass())}},removeOverClass:{value:function(){ this.element.removeClass(this.getOverClass())}},getOverClass:{value:function(){ return this.overClass}}}),t}(e);return t},e.exports.$inject=["FileDirective"]},function(e,t,n){ "use strict";var r=function(e){ return e&&e.__esModule?e["default"]:e};r(n(2));e.exports=function(e,t,n){ return{link:function(r,i,o){ var s=r.$eval(o.uploader);if(!(s instanceof t))throw new TypeError('"Uploader" must be an instance of FileUploader');var a=new n({uploader:s,element:i});a.getOptions=e(o.options).bind(a,r),a.getFilters=function(){ return o.filters}}}},e.exports.$inject=["$parse","FileUploader","FileSelect"]},function(e,t,n){ "use strict";var r=function(e){ return e&&e.__esModule?e["default"]:e};r(n(2));e.exports=function(e,t,n){ return{link:function(r,i,o){ var s=r.$eval(o.uploader);if(!(s instanceof t))throw new TypeError('"Uploader" must be an instance of FileUploader');if(s.isHTML5){
       var a=new n({uploader:s,element:i});a.getOptions=e(o.options).bind(a,r),a.getFilters=function(){ return o.filters}}}}},e.exports.$inject=["$parse","FileUploader","FileDrop"]},function(e,t,n){ "use strict";var r=function(e){ return e&&e.__esModule?e["default"]:e};r(n(2));e.exports=function(e,t){ return{link:function(n,r,i){ var o=n.$eval(i.uploader);if(!(o instanceof e))throw new TypeError('"Uploader" must be an instance of FileUploader');var s=new t({uploader:o,element:r});s.getOverClass=function(){ return i.overClass||s.overClass}}}},e.exports.$inject=["FileUploader","FileOver"]}])});
    //# sourceMappingURL=angular-file-upload.min.js.map

[http_blog.csdn.net_zcl_love_wx]: http://blog.csdn.net/zcl_love_wx
[http_www.bootcdn.cn_angular-file-upload_readme]: http://www.bootcdn.cn/angular-file-upload/readme/
[https_github.com_nervgh_angular-file-upload_wiki_Module-API]: https://github.com/nervgh/angular-file-upload/wiki/Module-API
[http_nervgh.github.io_pages_angular-file-upload_examples_simple]: http://nervgh.github.io/pages/angular-file-upload/examples/simple/