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 相关文章推荐
js 获取子节点函数 (兼容FF与IE)
Apr 18 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
js实现简单的验证码
Dec 25 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 Javascript
layui 给数据表格加序号的方法
Aug 20 Javascript
jQuery滑动效果实现方法分析
Sep 05 jQuery
用node.js写一个jenkins发版脚本
May 21 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
Node.js API详解之 net模块实例分析
May 18 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中zip_open()函数用法
2019/02/15 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
JS option location 页面跳转实现代码
2008/12/27 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
Python 字典(Dictionary)操作详解
2014/03/11 Python
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
Python装饰器使用示例及实际应用例子
2015/03/06 Python
在Django的模型中添加自定义方法的示例
2015/07/21 Python
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
用Pygal绘制直方图代码示例
2017/12/07 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
Python语言进阶知识点总结
2019/05/28 Python
Python3分析处理声音数据的例子
2019/08/27 Python
python 实现多维数组转向量
2019/11/30 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
我们的节日端午节活动方案
2014/03/02 职场文书
春节联欢晚会主持词
2014/03/24 职场文书
环保建议书500字
2014/05/14 职场文书
常务副总经理任命书
2014/06/05 职场文书
装修施工安全责任书
2014/07/24 职场文书