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 相关文章推荐
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
jquery实现手风琴效果
Nov 20 Javascript
JS动态增删表格行的方法
Mar 03 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
setTimeout学习小结
Feb 08 Javascript
vue2.0 自定义日期时间过滤器
Jun 07 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 Javascript
antd配置config-overrides.js文件的操作
Oct 31 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实现Socket服务器的代码
2008/04/03 PHP
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
JavaScript实现手风琴效果
2021/02/18 Javascript
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
python读写ini配置文件方法实例分析
2015/06/30 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
python3.5绘制随机漫步图
2018/08/27 Python
详解Python用户登录接口的方法
2019/04/17 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
十八届三中全会报告学习材料
2014/02/17 职场文书
自荐信的格式
2014/03/10 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
MySQL自定义函数及触发器
2022/08/05 MySQL