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 相关文章推荐
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
优雅的在React项目中使用Redux的方法
Nov 10 Javascript
Angular2实现的秒表及改良版示例
May 10 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
Nov 07 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
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
php中计算时间差的几种方法
2009/12/31 PHP
php 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
PHP 加密解密内部算法
2010/04/22 PHP
php中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
srcElement表格样式
2006/09/03 Javascript
JS 实现双色表格实现代码
2009/11/24 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
2018/09/27 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
python BeautifulSoup使用方法详解
2013/11/21 Python
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
深入浅析python3中的unicode和bytes问题
2019/07/03 Python
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
在什么时候需要使用"常引用"
2015/12/31 面试题
保险专业大专生求职信
2013/10/26 职场文书
孝老爱亲模范事迹材料
2014/05/25 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
纪检干部学习心得体会
2016/01/23 职场文书
浅谈如何提高PHP代码质量之单元测试
2021/05/28 PHP
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL