zoukankan      html  css  js  c++  java
  • angular.js封装的文件上传指令

    今天把最近用到的东西整理一下,直接上代码,需要申请犀牛存储图片,文件

    1.html

    div
        div
            img.img-thumbnail.center-block(ng-src="{{ltUpload||'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=26528730,97133990&fm=21&gp=0.jpg'}}")
        label.btn.btn-danger.center-block 选择并上传
            input.hidden(type="file" tinfile file-fn="upload(file)" )
    

    2.js

    angular.module('app').directive('ltUpload',[function(){
    
        return {
            // name: '',
            // priority: 1,
            // terminal: true,
            scope: {
                ltUpload:'='
            }, // {} = isolate, true = child, false/undefined = no change
            controller:['$scope', '$element', '$attrs', '$transclude','$http','$rootScope', function($scope, $element, $attrs, $transclude,$http,$rootScope) {
                var config=angular.copy($rootScope.qiniuConfig);
                var token=config.UpToken;

            //uuid function uuid() { var s = []; var hexDigits = (new Date()).getTime()+'abcehasjdkqwqwejkljada'; for (var i = 0; i < 36; i++) { s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1); } s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010 s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01 s[8] = s[13] = s[18] = s[23] = "-"; var uuid = s.join(""); return uuid; } $scope.upload=function(file){ var key=uuid(); var sendConfig = new FormData(); sendConfig.append("file", file); sendConfig.append("token", token); sendConfig.append("key",key); $http.post('http://up.qiniu.com',sendConfig, { transformRequest: angular.identity, headers: {'Content-Type': undefined}, withCredentials:false }).success(function(data){ $scope.ltUpload ='http://'+config.recordPath+'/'+ key; }); } }], // require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements // restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment // template: '<div ng-transclude></div>', templateUrl: 'app/dist/directive/ltUpload/index.html', replace: true, // transclude: true, // compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})), link: function($scope, iElm, iAttrs, controller) { // console.log(iElm) // console.log(iAttrs); } } }])

     

    3.用法

      .col-md-3(lt-upload='goodsInfo.thumbnail') 

  • 相关阅读:
    C/S WinFORM 快速开发框架 MyRapid快速开发框架更新日志 ---数据权限控制
    C/S WinFORM 快速开发框架 MyRapid快速开发框架更新日志 ---自动生成操作手册
    C/S WinFORM 快速开发框架 MyRapid快速开发框架更新日志 ---添加模块流程图
    代码分享:给窗体添加水印
    版本需更新提醒
    如何做好软件自动更新
    做项目管理踩过的坑
    团队开发的代码管理(VS)
    Java8尽管很香,你想过升级到Java11吗?会踩那些坑?
    这个 Spring 循环依赖的坑,90% 以上的人都不知道
  • 原文地址:https://www.cnblogs.com/s-quan/p/6141470.html
Copyright © 2011-2022 走看看