利用基于angularjs的angular-file-upload.min.js控件实现上传文件
参考博客: https://blog.csdn.net/zcl_love_wx/article/details/51692819
相关网址:
官网:http://www.bootcdn.cn/angular-file-upload/readme/
API : https://github.com/nervgh/angular-file-upload/wiki/Module-API
https://segmentfault.com/a/1190000016113163?utm_source=tag-newest
插件:
示例:http://nervgh.github.io/pages/angular-file-upload/examples/simple/
个人总结
今天跟大家分享的是一个依赖于angular的上传控件。angular-file-upload.min.js,结合公司的项目和我这段时间的查看文档案例,在这里总结一下;
项目angular项目中用到的上传文件控件,大概需要实现的样式是这样子的,如下:
配置步骤
1.首先引入angular.js
2.引入angular-file-upload.min.js控件
3.声明angular实例时;需要注入angularFileUpload依赖
例如: var app=angular.module(‘app’,[‘angularFileUpload’]);
4.在用到的controller中注入依赖服务FileUploader;
例如:app.controller(‘appController’,[’$scope,‘FileUploader’,function…
以上是准备工作,一般项目中都是封装成指令来做,最后会有案例体现.
指令----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 */}});
指令----nv-file-select
<!-- 简单的使用 -->
<input type="file" nv-file-select uploader="{FileUploader}"/>
<!-- 有更多配置的情形 -->
<input type="file" nv-file-select uploader="{FileUploader}" options="{Object}" filters="{String}"/>
指令----nv-file-over
<!-- 简单的使用 -->
<element nv-file-over uploader="{FileUploader}"></element>
<!-- 有更多配置的情形 -->
<element nv-file-over uploader="{FileUploader}" over-class="{String}"></element>
服务: 控件服务
FileUploader
内容讲解: 涉及到的属性,方法,回调等
一 :FileUploader
------------------------------------------------属性如下------------------------------------------------------
--------------------------------------------------------方法----------------------------------------------------
--------------------------------------------------回调----------------------------------------------------------
二: FileItem
------------------------------------------------属性如下------------------------------------------------------
--------------------------------------------------------方法----------------------------------------------------
--------------------------------------------------回调----------------------------------------------------------
三: 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
实例
html页面
<!-- multiple属性支持一次性选择多个文件 -->
<input type="file" nv-file-select="" uploader="uploader" multiple="">
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);
}]);
只能上传图片的过滤器
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;}});
案例一: 非常简单的一个小dome,用到的东西很少
html代码
<div ng-controller="firstController" class="container"><!-- multiple属性支持一次性选择多个文件 --><input type="file" nv-file-select="" uploader="uploader" multiple=""><span ng-repeat='item in uploader.queue'>{{item.file.name}}</span>
</div>
js代码
var app=angular.module('App',['angularFileUpload']);
app.controller('firstController',['$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);
}]);
案例二: 项目中用到的单文件多文件上传,并且可以限制格式,封装成了指令,比较复杂
使用指令的html页面
<div ng-controller="firstController" class="container"><!--封装的指令--><upload-files style="display:inline-block" special-param="taskNameObj.taskName" special-flag="1" file-type-exp="zip|xlsx|xls" ng-if="isShowBtnTab(btnTabLinkUrl.uploading)" not-delete-from-service="true" text="上传清单和交付物" url="api/services/app/Project_Deliverable/ImportDeliverablesFromExcel" success-call-back="getPlanIdAdd"></upload-files>
</div>
指令的模板html页面
<div>
<style>.errorMsg {text-align: left;line-height: 30px;border: 1px solid;color: #ff0000;width: 100%;padding-left: 10px;margin-top:20px;}/*.closeDetai {font-size: 20px;cursor: pointer;}*/
</style>
<span class="btn btn-default" ng-click="openUpload()">{{text}}</span><div class="modal fade uploadModal" tabindex="-1" role="dialog"><div class="modal-dialog modal-lg" role="document"><div class="modal-content"><div class="main-tlt"><div class="cn"><i class="glyphicon glyphicon-record"></i>文件上传</div></div><div class="modal-body"><div style="color:#98989a;font-size: 10px;margin-top: -20px;margin-bottom: 20px;">提示:1,文件大小不超过{{fileSize}}M。 2,文件类型支持的后缀名有{{fileType}}。</div><input type="file" multiple nv-file-select uploader="uploader" {{uploader.isUploading?disabled:}} /><table class="table" style="margin-top:20px"><thead><tr><th width="40%">文件名</th><th ng-show="uploader.isHTML5">大小</th><th width="20%" ng-show="uploader.isHTML5">上传进度</th><th>状态</th><th>操作</th></tr></thead><tbody><tr ng-repeat="item in uploader.queue"><td><strong>{{ item.file.name }}</strong></td><td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td><td ng-show="uploader.isHTML5"><div class="progress" style="margin-bottom: 0;"><div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div></div></td><td class="text-center"><span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span><span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span><span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span></td><td nowrap><button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess || specialFlag=='1'"><span class="glyphicon glyphicon-upload"></span> 上传</button><button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading"><span class="glyphicon glyphicon-ban-circle"></span> 取消</button><button type="button" class="btn btn-danger btn-xs" ng-click="removeItem(item)"><span class="glyphicon glyphicon-trash"></span> 删除</button></td></tr><tr><td colspan="5" ng-show="uploader.queue.length==0">请选择文件...</td></tr></tbody></table><div><div>上传进度 :<div class="progress" style=""><div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div></div></div><!-- uploader.uploadAll() --><button type="button" class="btn btn-success btn-s" ng-click="allTheUpload()" ng-disabled="!uploader.getNotUploadedItems().length"><span class="glyphicon glyphicon-upload"></span> 全部上传</button><button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading"><span class="glyphicon glyphicon-ban-circle"></span> 全部取消</button><button type="button" class="btn btn-danger btn-s" ng-click="removeAll()" ng-disabled="!uploader.queue.length"><span class="glyphicon glyphicon-trash"></span> 全部删除</button></div><div class="errorMsg" ng-bind-html="errMsg" ng-show="errMsg!==''"></div><div class="loading-more" ng-show="uploader.isUploading"><div class="cn"><div class="tlt"><i></i>正在上传,请稍后...</div></div></div></div><div class="modal-footer"><span class="btn btn-default" data-dismiss="modal">关闭</span></div></div></div>
</div>
</div>
js代码,directive指令的代码和controller
(function () {var app = angular.module("app");app.directive("uploadFiles", ['serverDomain', 'httpService', 'FileUploader', '$uibModal', '$cookies', function (serverDomain, httpService, FileUploader, $uibModal, $cookies) {return {restrict: "E",scope: {successCallBack: "&",inmodal: "@?",//在modal中调用的时候设置为truenotDeleteFromService: "@?",fileTypeExp: "@?",specialFlag: '@?', // 特殊情况下的标识符specialParam: '=?' // 特殊情况下的参数},//require: "ngModel",controller: function ($scope, $element, $attrs) {var uploadUrl = $attrs.url;var type = $attrs.type;var specialparam = $scope.specialParam;if (!uploadUrl || uploadUrl === "") {console.error("导入控件需要url属性,目前url缺失或不正确,不能进行导入操作");}$scope.openUpload = function () {if ($scope.specialFlag == '1') {if ($scope.specialParam == '') {abp.message.error('请先选择任务名称!');} else {$element.find(".uploadModal").modal({backdrop: 'static', keyboard: false});}} else {$element.find(".uploadModal").modal({backdrop: 'static', keyboard: false});}}//重新打开模态框,提示信息清空$element.find(".uploadModal").on("show.bs.modal", function () {$scope.errMsg = "";});// 关闭modal框的时候$element.find(".uploadModal").on('hidden.bs.modal', function () {//如果inmodal为true就设置body的样式if ($scope.inmodal) {//当modal套modal的形式弹出的时候,子modal关闭会自动删掉body上的modal-open,导致父modal内容过多的时候不能上下滚动if (!$("body").hasClass("modal-open")) {$("body").addClass("modal-open");}}});var confirmMsg = $scope.notDeleteFromService === "true" ? "即将从上传队列中删除" : "如文件已上传,则会删除服务器上的源文件";//删除单个文件$scope.removeItem = function (item) {abp.message.confirm(confirmMsg, "确定删除吗?", function (result) {if (result) {var msg = "";if (!$scope.notDeleteFromService || $scope.notDeleteFromService !== "true") {if (item.isUploaded) {var url = serverDomain + "api/services/app/UploadFile/DeleteOneFile?fileId=" + item.fileId;httpService.Delete(url, function (rst) {if (!rst.success) {msg = "文件:" + item.file.name + " 从服务器上删除失败";}});}var idx = -1;//要删除的索引$scope.responseResult.forEach(function (val, index) {if (val.id === item.id) {idx = index;return;}});$scope.responseResult.splice(idx, 1);//回显列表中删除 }item.remove();//上传列表中删除if ($scope.successCallBack()) {$scope.successCallBack()($scope.responseResult);}$scope.errMsg = msg != "" ? msg : "删除成功";$scope.$apply();}});};$scope.removeAll = function () {abp.message.confirm(confirmMsg, "确定删除吗?", function (result) {if (result) {var msg = "";if (!$scope.notDeleteFromService || $scope.notDeleteFromService === "true") {uploader.queue.forEach(function (item, index) {if (item.isUploaded && item.id) {var url = serverDomain + "api/services/app/UploadFile/DeleteOneFile?fileId=" + item.fileId;httpService.Delete(url, function (rst) {if (!rst.success) {msg += "文件:" + item.file.name + " 从服务器上删除失败";}});}});$scope.responseResult = [];//回显列表中删除 }if ($scope.successCallBack()) {$scope.successCallBack()($scope.responseResult);}$scope.uploader.clearQueue();$scope.errMsg = msg != "" ? msg : "删除成功" + "<br/>";$scope.$apply();}});};$scope.errMsg = "";$scope.responseResult = [];var uploader = $scope.uploader = new FileUploader({url: serverDomain + uploadUrl,removeAfterUpload: false,alias: "file",//后台接口文件参数名称formData: [{type: type,pid: sessionStorage.getItem("pId"),taskName: specialparam}],headers: {"Authorization": 'Bearer ' + $cookies.get("XSRF-TOKEN")}});$scope.fileSize = 20;var exp = "jpg|png|gif|bmp|jpeg|tif|pdf|zip|rar|docx|doc|xlsx|xls";//默认允许的文件格式if ($scope.fileTypeExp) {exp = $scope.fileTypeExp;}$scope.fileType = exp.split("|").join("、");$element.find("input[type=file]").change(function (e) {$scope.errMsg = "";});// a sync filteruploader.filters.push({name: 'syncfilter',fn: function (file /*{file|filelikeobject}*/, options) {var size = file.size / 1024 / 1024;var name = file.name;if (size > $scope.fileSize) {$scope.errMsg += name + "文件大小已超过20M ;<br/>";return false;}var reg = new RegExp("\.(" + exp + ")$", "gi");if (!reg.test(name)) {$scope.errMsg += name + " 文件类型不允许;<br/>";return false}if ($scope.specialFlag == '1') {var len = $scope.uploader.queue.length;if (len == 2) {$scope.errMsg = "选择错误,最多选择两个文件!";return false;} else if (len == 0) {if (file.name.substr(-3, 3) != 'zip') {$scope.errMsg = "选择错误,第一个文件请选择zip格式!";return false;}}}$scope.errMsg = "";return true;}});// 项目文档管理 特殊情况下的校验(全部上传click)$scope.allTheUpload = function () {if ($scope.specialFlag == '1') {var zipFlag = 0;var xlsFlag = 0;if ($scope.uploader.queue.length < 2) {$scope.errMsg = "选择错误,请选择一项zip文件、xlsx或xls文件!";} else {angular.forEach($scope.uploader.queue, function (v, i) {let str = v.file.name.substr(-3, 3);if (i == 0) {if (v.file.name.substr(-3, 3) != 'zip') {$scope.errMsg = "选择错误,第一个文件请选择zip格式!";return false;}}if (str == 'zip') {zipFlag += 1;} else {xlsFlag += 1;}})if (zipFlag == 2) {$scope.errMsg = "选择错误,请选择一项zip文件、xlsx或xls文件!";} else if (xlsFlag == 2) {$scope.errMsg = "选择错误,请选择一项zip文件、xlsx或xls文件!";} else {$scope.uploader.uploadAll();}}} else {$scope.uploader.uploadAll(); // 如果不是特殊情况,直接调接口}}// CALLBACKSuploader.onWhenAddingFileFailed = function (item /*{File|FileLikeObject}*/, filter, options) {API.log("用户选择了一个错误文件:", item)};uploader.onAfterAddingFile = function (fileItem) {console.log("onAfterAddingFile", fileItem)};uploader.onAfterAddingAll = function (addedFileItems) {console.info('onAfterAddingAll', addedFileItems);};uploader.onBeforeUploadItem = function (item) {API.log('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) {if (response.success) {$scope.errMsg += "文件:" + fileItem.file.name + " 上传成功" + "<br/>";$scope.responseResult.push(response.result);if (response.result) {fileItem.id = response.result.id;//上传成功赋上id,以便删除时候使用fileItem.fileId = response.result.fileId;//上传成功赋上fileId,以便删除时候使用}if ($scope.successCallBack()) {$scope.successCallBack()($scope.responseResult);}}else {$scope.errMsg += "文件:" + fileItem.file.name + "上传出错"if (response && response.error) {$scope.errMsg += ":" + response.error.message;}}console.info('onSuccessItem', fileItem, response, status, headers);};uploader.onErrorItem = function (fileItem, response, status, headers) {$scope.errMsg += "文件:" + fileItem.file.name + "上传出错";if (response && response.error) {$scope.errMsg += ":" + response.error.message;}console.info('onErrorItem', fileItem, response, status, headers);};uploader.onCancelItem = function (fileItem, response, status, headers) {$scope.errMsg += "文件:" + fileItem.file.name + "取消上传";console.info('onCancelItem', fileItem, response, status, headers);};//uploader.onCompleteItem = function (fileItem, response, status, headers) {// console.info('onCompleteItem', fileItem, response,status, headers);//};uploader.onCompleteAll = function () {//$scope.errMsg = "上传成功";console.info('onCompleteAll');};//console.info('uploader', uploader);},link: function (scope, element, attr, ngModelCtrl) {scope.text = attr.text || "导入";},replace: true,templateUrl: "../App/views/template/uploadFiles.html",};}]);
})()
插件代码,如果没下载到插件,可复制 里的代码
/*angular-file-upload v2.1.3https://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
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- 前端框架天下三分:Angular React 和 Vue的比较
前端这几年的技术发展很快,细分下来,主要可以分成四个方面: 1.开发语言技术,主要是ES6&7,coffeescript,typescript等; 2.开发框架,如Angular,React,Vue.jsÿ…...
2024/4/23 13:21:03 - angular依赖注入_依赖注入:Angular vs. RequireJS
angular依赖注入如果您以前曾经构建过大型JavaScript应用程序,那么您将面临管理组件依赖项的任务。 您可以将组件视为功能块。 它可以是函数,对象或实例。 该块选择公开一个或多个公共方法。 它还可以选择隐藏非公共功能。 在本文中,我们将研…...
2024/4/27 3:03:25 - angular、vue、react的区别
前端这几年的技术发展很快,细分下来,主要可以分成四个方面: 1.开发语言技术,主要是ES6&7,coffeescript,typescript等; 2.开发框架,如Angular,React,Vue.js࿰…...
2024/4/23 13:41:19 - angularjs中post请求进行跨域
post请求进行跨域angularjs内置封装了类ajax的网络服务$http,所以实现了依赖外部插件来完成完整的前后端分离方案$scope.main {getData: function () {$http({method: POST,url: http://localhost:8000,headers: {Content-Type : application/x-www-form-urlencoded},data: {m…...
2024/4/24 22:30:26 - angular用$http请求数据
项目中用到$http请求数据接口像jQuery里的$ajax一样分为post请求和get请求. get请求: $http({ url:url1, //接口地址method: get }).success(function(data){ //请求成功console.log("成功"); }).error(function…...
2024/4/23 20:13:00 - angular 接口请求不到数据的问题
最近在用ng5升级ext的老项目,发现post请求一直请求不到数据,最终发现原因是数据格式的问题。 服务器接口接收的是form表单格式,而前端post请求发送的是json数据格式。比如下面这个请求: this.http.post(${this.uri}/data/list.jso…...
2024/4/26 2:34:30 - Angular 请求数据
Angular 请求数据 get post 以及 jsonp 请求数据 引入 HttpModule 、JsonpModule 普通的 HTTP 调用并不需要用到 JsonpModule,不过稍后我们就会延演示对 JSONP 的支持,所以现在就加载它,免得再回来浪费时间。 引入模块 import { HttpClientJs…...
2024/5/2 22:04:54 - 【前端】10. Angular 中的数据交互(get jsonp post )
参考视频:https://www.bilibili.com/video/av50917863?p12 Angular8视频教程-IT营配套笔记如下(参考自大地老师): 一、Angular get 请求数据 Angular5.x 以后 get、post 和和服务器交互使用的是 HttpClientModule 模块。 1、…...
2024/5/2 6:55:29 - Angular中页面传参获取参数
今天使用html传参数,始终获取不到参数值。研究了半天,终于解决,以下是angular获取页面传参参数方法在angular中有一项服务为$location,使用这项服务可以获取页面参数,$location的方法不止这一个,还可以获取…...
2024/5/2 2:39:52 - AngularJs 自定义指令中的Scope属性
1.应用场景 了解AngularJs 自定义指令中的Scope属性的用法. 2.学习/操作 一、概念说明 可以是true、 false 、哈希对象 {} 1、true 新创建了一个作用域,且继承了父作用域;在初始化的时候,用了父作用域的属性和方法去填充我们…...
2024/5/2 3:32:47 - Angular8 发布与订阅 解决子组件与父组件传值问题
本文主要作用是解决子组件向父组件传值,Output()方法不适用得情况,也可以作为主流传值手段使用。 其他子父组件传值也可以通过浏览器的储存机制来处理,例如:sessionStorage, localstorage等来解决,不过比起订阅模式来说…...
2024/5/1 22:59:24 - 浅聊angular2中通信方式
前言: 在软件开发工程中,随着应用规模的不断扩大,必然需要进行逻辑分离。在 Web 开发中,组件化和模块化的观念已经被越来越多的人所熟知,从而编写出更高质量的代码。 同时,随着实体职责的分离,我…...
2024/4/26 5:28:15 - angular2--不同页面间发起通知 sfnBroadCast
例如:当我退出登录的时候,需要通知用户中心 一、在需要发起通知的页面: 1、引入 import { EventServices } from ../../../services/event.services;2、在构造函数中加入: constructor(private eventBus: EventServices&#…...
2024/4/26 19:12:34 - Angular2学习笔记——在子组件中拿到路由参数
原文链接:http://www.cnblogs.com/dojo-lzz/p/5883408.html 工作中碰到的问题,特此记录一下。 Angular2中允许我们以path\:id\childPath的形式来定义路由,比如: export const appRoutes: RouterConfig [{path: app/:id, componen…...
2024/5/1 22:57:49 - angular2语法总结
1、ngStyle 基本用法 <div [ngStyle]"{background-color:green}"></<div> 判断添加<div [ngStyle]"{background-color:username zxc ? green : red }"></<div> 2、ngClass第一个参数为类名称,第二个参数为boo…...
2024/5/2 2:50:52 - Angular day2 组件相关 + pipe
一.循环 ngFor //在html文件中 <div>{{title}}</div> <ul><li *ngFor"let item of menus"><a href"#">{{ item.title }}</a></li> </ul>//在对应html文件的component.ts文件中 interface TopMenu {title…...
2024/5/2 1:51:32 - angular总结2
依赖注入 依赖注入(DI):如果一个对象A要依赖一个类型为B的对象,A无需实例化B,使用依赖注入机制注入 控制反转(IOC):将依赖的控制权由代码的内部转移到代码的外部。 依赖注入与控制反转是一体两面,表达的是一个思想&a…...
2024/5/2 6:41:10 - 【angular】angular框架介绍
是什么? 什么是框架?众所周知,就是一种实现的结构,从程序员的角度看,前端框架是一种特殊的、已经实现了的web应用,我们只需要对他进行具体的业务逻辑的填充即可,由框架根据具体的业务逻辑来调用…...
2024/5/2 2:53:22 - 前端环境搭建之 Angular + Node.js 的操作教程
1.下载安装nodejs 打开nodejs官网,点击硕大的绿色Download按钮,它会根据系统信息选择对应版本(.msi文件)。 node.js插件在windows系统下是个.msi工具,只要一直下一步即可,软件会自动在写入环境变量中&…...
2024/5/2 1:22:52 - angular项目中引入three.js
angular three.js Outline Pass 安装three.js 把three.js作为全局资源文件,放在html文件的头部 <script src"./assets/js/three.min.js"></script>//在添加下面一行代码,就可以使用全局的THREE了。declare var THREE: any;npm方…...
2024/5/1 23:14:16
最新文章
- 各个硬件的工作原理
目录 前言 主存储器的基本组成 运算器的基本组成 控制器的基本组成 计算机的工作过程 前言 上个小节我们学习了现代计算机的基本构成都是基于冯诺依曼的思想来设计的,那么本章节要来看看主机内部三个组件的细节以及它们之间相互协调工作的. 主存储器的基本组成 这张图非常…...
2024/5/2 22:55:49 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - FPGA开源项目分享——基于 DE1-SOC 的 String Art 实现
导语 今天继续康奈尔大学FPGA课程ECE 5760的典型案例分享——基于DE1-SOC的String Art实现。 (更多其他案例请参考网站: Final Projects ECE 5760) 1. 项目概述 项目网址 ECE 5760 Final Project 项目说明 String Art起源于19世纪的数学…...
2024/5/2 15:32:36 - java的gradle,maven工程中使用selenium
一、下载selenium库 (1)gradle工程 工程中会有一个build.gradle.kts的文件,这个文件可以定制 Gradle 的行为 在文件中添加下面代码,然后sync // implementation ("org.seleniumhq.selenium:selenium-java:4.19.1") …...
2024/4/29 19:33:34 - 文件系统 FTP Ubuntu 安装入门介绍
FTP 环境: Ubuntu 14.04 blog zh_CN ubuntu14.04 Install 全新安装:apt-get install vsftpd 重新安装:apt-get --reinstall install vsftpd 卸载并清除配置文件:apt-get --purge remove vsftpd Start & Restart $ service vsftpd start $ se…...
2024/5/2 18:20:21 - 【外汇早评】美通胀数据走低,美元调整
原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...
2024/5/1 17:30:59 - 【原油贵金属周评】原油多头拥挤,价格调整
原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...
2024/5/2 16:16:39 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...
2024/4/29 2:29:43 - 【原油贵金属早评】库存继续增加,油价收跌
原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/5/2 9:28:15 - 【外汇早评】日本央行会议纪要不改日元强势
原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...
2024/4/27 17:58:04 - 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响
原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...
2024/4/27 14:22:49 - 【外汇早评】美欲与伊朗重谈协议
原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/4/28 1:28:33 - 【原油贵金属早评】波动率飙升,市场情绪动荡
原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/4/30 9:43:09 - 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试
原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...
2024/4/27 17:59:30 - 【原油贵金属早评】市场情绪继续恶化,黄金上破
原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...
2024/5/2 15:04:34 - 【外汇早评】美伊僵持,风险情绪继续升温
原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...
2024/4/28 1:34:08 - 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势
原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...
2024/4/26 19:03:37 - 氧生福地 玩美北湖(上)——为时光守候两千年
原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...
2024/4/29 20:46:55 - 氧生福地 玩美北湖(中)——永春梯田里的美与鲜
原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...
2024/4/30 22:21:04 - 氧生福地 玩美北湖(下)——奔跑吧骚年!
原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/5/1 4:32:01 - 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!
原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...
2024/4/27 23:24:42 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/4/28 5:48:52 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...
2024/4/30 9:42:22 - 广州械字号面膜生产厂家OEM/ODM4项须知!
原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...
2024/5/2 9:07:46 - 械字号医用眼膜缓解用眼过度到底有无作用?
原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...
2024/4/30 9:42:49 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下:1、长按电脑电源键直至关机,然后再按一次电源健重启电脑,按F8健进入安全模式2、安全模式下进入Windows系统桌面后,按住“winR”打开运行窗口,输入“services.msc”打开服务设置3、在服务界面,选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。
%读入6幅图像(每一幅图像的大小是564*564) f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面,在等待界面中我们需要等待操作结束才能关机,虽然这比较麻烦,但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows,请勿关闭计算机”的提示,要过很久才能进入系统,有的用户甚至几个小时也无法进入,下面就教大家这个问题的解决方法。第一种方法:我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题,电脑时发现开机屏幕显现“正在配置Windows Update,请勿关机”(如下图所示),而且还需求等大约5分钟才干进入系统。这是怎样回事呢?一切都是正常操作的,为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示,没过几秒后电脑自动重启,每次开机都这样无法进入系统,此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一:开机按下F8,在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况,就是电脑提示正在准备windows请勿关闭计算机,碰到这样的问题该怎么解决呢,现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法:1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后,每次关机的时候桌面上都会显示一个“配置Windows Update的界面,提示请勿关闭计算机”,每次停留好几分钟才能正常关机,导致什么情况引起的呢?出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着,别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚,只能是考虑备份数据后重装系统了。解决来方案一:管理员运行cmd:net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?
原标题:电脑提示“配置Windows Update请勿关闭计算机”怎么办?win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢?一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了,具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面,长时间没反应,无法进入系统。这个问题原来帮其他同学也解决过,网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法,并在最后教给你1种保护系统安全的好方法,一起来看看!电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中,添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候,开启电脑发现电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机。。.这要怎么办呢?下面小编就带着大家一起看看吧!如果能够正常进入系统,建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题,就是我们的win7系统在关机的时候,总是喜欢显示“准备配置windows,请勿关机”这样的一个页面,没有什么大碍,但是如果一直等着的话就要两个小时甚至更久都关不了机,非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时,一般是您正对windows进行升级,但是这个要是长时间没有反应,我们不能再傻等下去了。可能是电脑出了别的问题了,来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况,当我们打开电脑之后,发现一直停留在一个界面:“配置Windows Update失败,还原更改请勿关闭计算机”,等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57