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

最新推荐文章于 2020-11-04 14:06:18 发布
置顶 最新推荐文章于 2020-11-04 14:06:18 发布
阅读量2w 收藏 18
点赞数 6
分类专栏： AngularJS angularJS应用详解 文章标签： angularjs FileUpload API

翻译 : 张春玲
博客：http://blog.csdn.net/zcl_love_wx
转载请注明出处

1.相关网址

官网：http://www.bootcdn.cn/angular-file-upload/readme/
API ： https://github.com/nervgh/angular-file-upload/wiki/Module-API
插件：
示例：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

属性

名称类型说明
urlString上传文件的服务器路径地址
aliasString接收文件的字段名，默认为”file”
queueArray要被上传的文件组成的队列（项目），可理解成集合
progressNumber队列上传的百分比，该属性只读
headersObject与文件一起发送的头文件,只适合支持html5的浏览器
formDataArray与文件一起发送的数据
filtersArray在将其添加到队列之前，将过滤器应用于文件。当过滤器返回true时，才该文件将被添加到队列中
autoUploadBoolean将文件添加到队列后自动上传
methodStringrequest请求方法。默认post。只适合支持HTML5的浏览器。
removeAfterUploadBoolean从队列上传后删除文件
isHTML5Boolean如果是支持HTML5浏览器上传为true,只读。
isUploadingBoolean如果上传正在进行中为true,只读。
queueLimitNumber最多上传的文件个数
withCredentialsBoolean使其跨源资源共享。只适合支持HTML5的浏览器。

方法

方法名传参与返回说明
addToQueuefunction(files[, options[, filters]]) {}将项目添加到队列中，当文件是一个文件列表文件或单个文件或htmlinputelement，options是Object类型，过滤器是字符串。
removeFromQueuefunction(value) {}从队列中删除一个文件项目，value是文件对象或是该文件在队列里的下标（序列）。
clearQueuefunction() {}从队列中移除所有元素。
uploadItemfunction(value) {}上传队列中的一个文件，value既可以是文件对象，也可是该文件在队列中的下标。
cancelItemfunction(value) {}取消上传队列中的一个文件，value既可以是文件对象，也可是该文件在队列中的下标。
uploadAllfunction() {}上传所有正在排队的待定项
cancelAllfunction() {}取消当前所有的上传
destroyfunction() {}破坏一个上传。
isFilefunction(value) {return {Boolean};}如果是文件对象就返回true
isFileLikeObjectfunction(value) {return {Boolean};}如果是FileLikeObject就返回。这是个啥？没用过。
getIndexOfItemfunction({FileItem}) {return {Number};}返回文件对象在队列里的下标。
getReadyItemsfunction() {return {Array.<FileItems>};}返回准备好上传的所有文件对象
getNotUploadedItemsfunction() {return {Array.<FileItems>};}返回队列中所有等待上传的文件对象组成的数组。

回调

方法名传参与返回说明
onAfterAddingFilefunction(item) {}向队列中添加一个单独的文件后触发
onWhenAddingFileFailedfunction(item, filter, options) {}添加一个文件失败后触发
onAfterAddingAllfunction(addedItems) {}在所有被拖拽或被选中的文件添加到队列后触发。
onBeforeUploadItemfunction(item) {}在上传一个文件对象之前触发。
onProgressItemfunction(item, progress) {}On file upload progress.
onSuccessItemfunction(item, response, status, headers) {}一个文件上传成功后触发
onErrorItemfunction(item, response, status, headers) {}上传出错时触发
onCancelItemfunction(item, response, status, headers) {}取消上传时触发
onCompleteItemfunction(item, response, status, headers) {}在文件上传完成时触发（独立操作成功）
onProgressAllfunction(progress) {}关于上传队列的进展
onCompleteAllfunction() {}上传一个完整的队列时加载所有的文件，或上传一个单独的文件时加载该文件时触发。

2.3.2 FileItem

属性

名称类型说明
urlString上传该文件的服务器路径地址
aliasString接收该文件的字段名，默认为”file”
headersObject与该文件一起发送的头文件,只适合支持html5的浏览器
formDataArray与该文件一起发送的数据
methodStringrequest请求方法。默认post。只适合支持HTML5的浏览器。
withCredentialsBoolean使其跨源资源共享。只适合支持HTML5的浏览器。
removeAfterUploadBoolean从队列上传后删除该文件
indexNumber该文件的上传序列。只读。
progressNumber文件上传的百分比，该属性只读
isReadyBoolean文件是否做准备好上传，只读。
isUploadingBoolean如果该文件正在上传中为true,只读。
isUploadedBoolean如果该文件已经上传了，则为true。只读。
isSuccessBoolean如果该文件已经上传成功了，则为true。只读.
isCancelBoolean如果上传被取消为true。只读。
isErrorBoolean如果上传出现错误为true。只读。
uploaderObject些文件参考父上传对象。只读。

方法

方法名传参与返回说明
removefunction() {}从队列中删除此文件
uploadfunction() {}上传此文件
cancelfunction() {}取消上传此文件

回调

方法名传参与返回说明
onBeforeUploadfunction() {}上传某个项目（文件）之前触发
onProgressfunction(progress) {}On file upload progress.
onSuccessfunction(response, status, headers) {}上传成功后触发
onErrorfunction(response, status, headers) {}上传出错时触发
onCancelfunction(response, status, headers) { }取消上传时触发
onCompletefunction(response, status, headers) {}在文件上传完成时触发（独立操作成功）

2.3.3 Filters

注入过滤器的两种方式:

var uploader = new FileUploader({
    filters: [{
        name: 'yourName1',
        // 自定义的过滤器
        fn: function(item) {
            return true;
        }
    }]
});

// 另一种方式加入自定义过滤器
uploader.filters.push({
    name: 'yourName2',
    fn: function(item) {
        return true;
    }
});

已定义好的过滤器

folder
queueLimit

3. 示例

3.1 html页面代码

<!-- multiple属性支持一次性选择多个文件 -->
<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
bug师姐
关注
  • 6
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
angular-file-upload的使用总结
星空&无痕 の 博客
02-15 5312
地址：https://github.com/nervgh/angular-file-upload 第一次使用这个组件，感觉这个组件的api在介绍略微简单，所以尝试了一会儿才成功。 这边我需要的功能是： 1.只能导入xls。 2.可以选择文件。 3.可以拖动文件上传。 4.上传过程中显示process。html页面部分code<div class="drop-file" nv-file-d
asp.net与Bootstrap fileuploader结合的图片上传下载
05-05
支持图片文件上传（只需稍微修改配置即可，网上的例子很多），支持删除原始文件夹内图片删除，回传图片地址等。源码直接用VS2015运行，喜欢的朋友多多支持。互相交流促进。
工作笔记之增加privilege属性
小新正在敲代码
10-26 943
需求分析本次需求主要涉及两个页面，分别为这两个页面增加一个privilege属性的radio按钮，最后把连同privilege属性的实体类保存到db中。 页面1： 这是一个弹出的模态框，增加一个privilege属性，并保存。 页面2： 这也是一个弹出的模态框，不过和页面1不同的是这里通过文件进行contact的批量导入。而页面1每次只导入一个contact信息。技术难点分析 如何获
angular file upload 队列上传机制
Donnie的专栏
12-11 2769
angular file upload 内部循环机制
Javascript 严格模式详解
哲
01-17 936
作者： 阮一峰 一、概述 除了正常运行模式，ECMAscript 5添加了第二种运行模式："严格模式"（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。 设立"严格模式"的目的，主要有以下几个： - 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为; - 消除代码运行的一些不安全之处，保证代码运行的安全； - 提高编译
fileuploader
02-02
5.0.2版的FineUploader，经亲测，去掉了所有不必要的东西，无自带模板。纯Javascript的文件上传，懂者自懂
FileUploader:初学者的文件上传演示
06-21
【标题】"FileUploader:初学者的文件上传演示"是一个针对初学者的教程项目，它展示了如何使用AJAX技术实现文件上传功能。这个项目结合了PHP后端处理和JavaScript前端交互，为用户提供了一种无刷新的文件上传体验，...
FileUploader
07-05
"FileUploader"是一个用于服务器端文件管理的工具，主要功能包括文件的上传、下载和删除。这个项目基于Spring MVC框架，利用XMLHttpRequest（XHR）进行第二层（纯JavaScript）的交互，提供了一种高效且用户友好的...
使用fileuploader.js实现文件上传
04-05
本篇文章将深入探讨如何使用`fileuploader.js`这个工具来实现文件上传功能。`fileuploader.js`是一个轻量级的JavaScript库，它简化了前端文件上传的处理过程，提供了丰富的定制选项和友好的API。 首先，`file...
AngularJS 文件上传控件 ng-file-upload详解
10-20
主要介绍了AngularJS 文件上传控件 ng-file-upload详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
bootstrap fileupload 使用详解~~
热门推荐
fanxiangru999的专栏
03-19 5万+
此文章记录引入bootstrap  fileupload 遇到的坑 官网实例：http://plugins.krajee.com/file-input-ajax-demo/1 1、需要引入的css及js： 注意jquery引入的顺序 2、我是单独做的实例，所以除了上面截图的内容，任何都系都没有引入，导致demo页中很多按钮图标没有显示，这是因为需要引入下面几个bootstrap的图
newFileUpload.js
cxy的博客
08-14 472
这个是外部系统：SOController下的 视图，演示了封装后的 上传组件 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <head th:include="commonHeader::commonHeader(title='Sales Order Operation',cssPaths='/js/a.
Angular angular-file-upload 入坑记
不忘初心
11-14 2万+
我们写网站呢 上传功能几乎是一定会用到的，这是一个灰常使用的插件，而且操作简单，非常容易使用，老规矩还是放一下API，走运的是，这个插件的API并不需要翻墙也看得到哦~ https://github.com/nervgh/angular-file-upload 进入正题，我们如何安装，还是老样子安利波npmnpm install angular-file-upload我们如何在项目中使用它呢
利用基于angularjs的angular-file-upload.min.js控件实现上传文件
weixin_43996999的博客
07-10 1179
个人总结 今天跟大家分享的是一个依赖于angular的上传控件。 项目angular项目中用到的上传文件控件，大概需要实现的样式是这样子的，如下：
angular-file-upload 中文API
lai_xu的专栏
10-31 2万+
angular-file-upload 中文API
Uploader 文件上传
泊一的博客
11-04 2752
Uploader 文件上传 request.js /** * 文件上传 */ class Request { constructor() { this._header = { }; // 请求头 this._baseURL = 'XXXX'; // api_prefix this._fileURL = 'XXXX'; // upload_prefix } uploadFile(filePath, header = this._heade
micropython file uploader 最新版
最新发布
05-14
7. 上传文件：在mpfshell中输入`put filename.py`，其中filename.py为要上传的文件名。 8. 关闭mpfshell：在mpfshell中输入`exit`，关闭mpfshell。 这样就可以使用mpfshell上传文件到Micropython设备了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值