AngularJs上传前预览图片的实例代码


Posted in Javascript onJanuary 20, 2017

在工作中,使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,之前查了一些资料,结合实践,得出一种比较实用的方法,相对简化版,在这里记录一下,如有不同看法,欢迎一起沟通,一起成长。

demo.html:

<!doctype html> 
<html ng-app="myTestCtrl"> 
<head> 
 <meta charset="UTF-8"> 
 <title>demo</title> 
 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 <script src="myCtrl.js"></script> 
 <style type="text/css"> 
 .inputBox{width: 160px; height: 28px; padding: 0 0 0 8px; box-sizing: border-box; background-color:#fff; margin-left: 5px; border: 1px solid #c4c4c4; color: #333; border-radius: 3px; -o-border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;} 
 .inputBox:focus{border: 1px solid #207fe9;} 
 .btn-primary {color: #fff; background-color: #428bca; border-color: #357ebd;} 
 .btn {display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400;line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px;} 
 .bg-bbbbbb{background-color: #bbb;} 
 .fl{float:left;} 
 .ml5{margin-left: 5px;} 
 .ml10{margin-left: 10px;} 
 .ml30{margin-left: 30px;} 
 .mt10{margin-top: 10px;} 
 .mt20{margin-top: 20px;} 
 .f-cb:after:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";} 
 .f-cb{zoom:1;} 
 .f-cb .topSearch{ float: left; margin-top: 10px; line-height: 30px; font-size: 12px; } 
 </style> 
</head> 
<body id="myTestCtrl" ng-controller="myTestCtrl"> 
<div class="wrapper"> 
 <div class="content"> 
  <div class="f-cb" style="height: 40px;"> 
   <div class="topSearch"><span class="w70 tr dib fl">主视觉图:</span><input type="text" class="inputBox fl ml5" ng-model="fileName"><button class="btn btn-primary ml10" ng-class="{'bg-bbbbbb':imgDisabled}" style="width:60px; margin-top:-3px; height:18px; position: relative;" img-upload></button></div> 
  </div> 
  <div class="f-cb mt10"><img ng-src="{{thumb.imgSrc}}" style="width:200px; height: 200px;" ng-show="thumb.imgSrc"/></div> 
 </div> 
 <div class="mt20 ml30"> 
  <button class="btn btn-primary" ng-click="saveClick()" ng-class="{'bg-bbbbbb':submitDisabled}">提交</button> 
 </div> 
</div> 
</body> 
</html> 
<span style="font-size:14px;">myCtrl.js:</span> 
<pre name="code" class="javascript">//关键 js 部分 
var myTestCtrl = angular.module('myTestCtrl', []); 
//定义“上传”指令,修改后也可用于上传其他类型的文件 
myTestCtrl.directive("imgUpload",function(){ 
 return{ 
  //通过设置项来定义 
  restrict: 'AE', 
  scope: false, 
  template: '<div class="fl"><input type="button" id="storeBtn" style="padding:0; position: absolute; top: 0; left: 0; background: none; border: none;color: #fff; width:84px; height: 30px; line-height: 30px;" value="选择文件"><input type="file" name="testReport" id="file" ng-disabled="imgDisabled" style="position: absolute; top: 0; left: 0; opacity: 0;height: 30px;" accept=".jpg,.png"></div>', //name:testReport 与接口字段相对应。 
  replace: true, 
  link: function(scope, ele, attrs) { 
   ele.bind('click', function() { 
    $('#file').val(''); 
   }); 
   ele.bind('change', function() { 
    scope.file = ele[0].children[1].files; 
    if(scope.file[0].size > 52428800){ 
     alert("图片大小不大于50M"); 
     scope.file = null; 
     return false; 
    } 
    scope.fileName = scope.file[0].name; 
    var postfix = scope.fileName.substring(scope.fileName.lastIndexOf(".")+1).toLowerCase(); 
    if(postfix !="jpg" && postfix !="png"){ 
     alert("图片仅支持png、jpg类型的文件"); 
     scope.fileName = ""; 
     scope.file = null; 
     scope.$apply(); 
     return false; 
    } 
    scope.$apply(); 
    scope.reader = new FileReader(); //创建一个FileReader接口 
    console.log(scope.reader); 
    if (scope.file) { 
     //获取图片(预览图片) 
     scope.reader.readAsDataURL(scope.file[0]); //FileReader的方法,把图片转成base64 
     scope.reader.onload = function(ev) { 
      scope.$apply(function(){ 
       scope.thumb = { 
        imgSrc : ev.target.result  //接收base64,scope.thumb.imgSrc为图片。 
       }; 
      }); 
     }; 
    }else{ 
     alert('上传图片不能为空!'); 
    } 
   }); 
  } 
 }; 
}); 
myTestCtrl.controller("myTestCtrl", function($scope, $http) { 
 //导入图片 
 $scope.saveClick = function () { 
  //禁用按钮 
  $scope.imgDisabled = true; 
  $scope.submitDisabled = true; 
  var url = '';//接口路径 
  var fd = new FormData(); 
  fd.append('testReport', $scope.file[0]);//参数 testReport=后台定义上传字段名称 ; $scope.file[0] 内容 
  $http.post(url, fd, { 
   transformRequest: angular.identity, 
   headers: { 
    'Content-Type': undefined 
   } 
  }).success(function (data) { 
   if(data.code != 100) { 
    alert(JSON.stringify('文件导入失败:'+files.files[0].name+',请重新上传正确的文件或格式')); 
   }else{ 
    alert(JSON.stringify('文件导入成功:'+files.files[0].name)); 
   } 
   //恢复按钮 
   $scope.imgDisabled = false; 
   $scope.submitDisabled = false; 
  }).error(function (data) { 
   alert('服务器错误,文件导入失败!'); 
   //恢复按钮 
   $scope.imgDisabled = false; 
   $scope.submitDisabled = false; 
  }); 
 }; 
});
</pre>
<br> 
<pre></pre> 
<p></p> 
<pre>
</pre> 
<p></p> 
<pre>
</pre>

关于angularjs的知识大家可以参考下小编给大家整理的专题,angularjs学习笔记,一起看看吧!

以上所述是小编给大家介绍的AngularJs上传前预览图片的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery版Tab标签切换
Mar 16 Javascript
js图片自动轮播代码分享(js图片轮播)
May 06 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
JS实现页面数据无限加载
Sep 13 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
vue修改vue项目运行端口号的方法
Aug 04 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
Angular 组件之间的交互的示例代码
Mar 24 Javascript
JS实现碰撞检测效果
Mar 12 Javascript
React列表栏及购物车组件使用详解
Jun 28 Javascript
详解JavaScript中this的指向问题
Jan 20 #Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 #Javascript
浅谈JavaScript异步编程
Jan 20 #Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 #Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 #Javascript
BootStrap组件之进度条的基本用法
Jan 19 #Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 #Javascript
You might like
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
javascript json 新手入门文档
2009/12/03 Javascript
心扬JS分页函数代码
2010/09/10 Javascript
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
2016/05/20 Javascript
微信jssdk用法汇总
2016/07/16 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
Node.js数据库操作之查询MySQL数据库(二)
2017/03/04 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
详细解析Python中的变量的数据类型
2015/05/13 Python
Python读写配置文件的方法
2015/06/03 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
如何真正的了解python装饰器
2020/08/14 Python
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
户外用品商店创业计划书
2014/01/29 职场文书
《找不到快乐的波斯猫》教学反思
2014/02/24 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
Python一行代码实现自动发邮件功能
2021/05/30 Python