AngularJS实现图片上传和预览功能的方法分析


Posted in Javascript onNovember 08, 2017

本文实例讲述了AngularJS实现图片上传和预览功能的方法。分享给大家供大家参考,具体如下:

html5原生方法

先看一下html5原生方法上传和预览图片的实现:

// <img id="img-preview">
var imgPreview = document.getElementById("img-preview");
// <input id="img-input" type="file">
var imgInput= document.getElementById("img-input");
imgInput.addEventListener("change", function(e){
 var imgFile = e.target.files[0]; // 获取上传的图片
 var reader = new FileReader();
 reader.readAsDataURL(imgFile ); // 将图片转成dataUri
 reader.onload = function(e) {
  imgPreview.src = e.target.result; //更新图片链接
 }
});

我们看到,需要用到onchange事件来获得上传的文件,当项目使用上angularjs时,很自然的,我们想到了ng-change指令,然而不幸的是,在angularjs中,<input type="file">不支持ng-model和ng-change指令(附录1),这就使得文件上传变得有些复杂了。

angularjs方法

这里使用开源的 angular-file-upload 模块来实现,步骤如下:

1、安装 angular-file-upload 模块

bower install angular-file-upload --save

2、添加到应用依赖

var app = angular.module('my-app', [
  'angularFileUpload'
]);

3、HTML代码

<!--文件上传指令-->
<input type="file" nv-file-select="" uploader="uploader" />
<!--图片预览-->
<img id="img-preview" ng-src="{{iconUrl}}">

这里,nv-file-select=""表示使用angular-file-upload模块的文件选择方式上传,参考官方例子

4、controller代码

.controller('AppController', ['$scope', 'FileUploader', function($scope, FileUploader) {
    var uploader = $scope.uploader = new FileUploader({
      url: 'upload.php' //换成自己的上传地址,本地演示不换也行
    });
    uploader.onAfterAddingFile = function(fileItem) {
      var reader = new FileReader();
      reader.addEventListener("load", function (e) {
        //文件加载完之后,更新angular绑定
        $scope.$apply(function(){
          $scope.iconUrl = e.target.result;
        });
      }, false);
      reader.readAsDataURL(fileItem._file);
    };
}]);

可以看到,我们通过onAfterAddingFile回调函数获得所选的图片文件,接下来把图片文件转成datauri,再更新<img>标签的src属性即可。

值得注意的是,我们把“更新<img>标签的src属性”这个任务放到了$scope.$apply方法中执行,这是因为在angular框架外部(如在浏览器DOM事件中, setTimeout, XHR 或者 第三方框架中)更新数据,angular是不会同步更新绑定的。这点可以参考angular $apply reference

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
javascript 学习笔记(一)DOM基本操作
Apr 08 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
js带点自动图片轮播幻灯片特效代码分享
Sep 07 Javascript
Angular 路由route实例代码
Jul 12 Javascript
jQuery中常用动画效果函数(日常整理)
Sep 17 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
微信小程序如何实现五星评价功能
Oct 15 Javascript
详解vue 中 scoped 样式作用域的规则
Sep 14 Javascript
javascript自定义事件功能与用法实例分析
Nov 08 #Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 #jQuery
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 #Javascript
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 #Javascript
vue中实现滚动加载更多的示例
Nov 08 #Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 #Javascript
结合mint-ui移动端下拉加载实践方法总结
Nov 08 #Javascript
You might like
php中判断文件空目录是否有读写权限的函数代码
2012/08/07 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
网站上面有这种切换效果
2006/06/26 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
浅谈JavaScript闭包
2019/04/09 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
对于Python的Django框架部署的一些建议
2015/04/09 Python
Python实现判断字符串中包含某个字符的判断函数示例
2018/01/08 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
Python hashlib常见摘要算法详解
2020/01/13 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
美国批发零售网站:GearXS
2016/07/26 全球购物
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
EJB3推出JPA的原因
2013/10/16 面试题
英文求职信结束语大全
2013/10/26 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
致接力运动员加油稿
2015/07/21 职场文书
毕业欢送会致辞
2015/07/29 职场文书
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python