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网页关键字高亮代码
Jul 30 Javascript
js 动态选中下拉框
Nov 26 Javascript
jQuery对象与DOM对象之间的转换方法
Apr 15 Javascript
jquery 选项卡效果 新手代码
Jul 08 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
js获取当前日期前七天的方法
Feb 28 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
Three.js快速入门教程
Sep 09 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
js array数组对象操作方法汇总
Mar 18 Javascript
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 Javascript
JavaScript实现滑块验证解锁
Jan 07 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访问查询mysql数据的三种方法
2006/10/09 PHP
php 归并排序 数组交集
2011/05/10 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
BootStrap中的表单大全
2016/09/07 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
2017/02/10 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
Django 生成登陆验证码代码分享
2017/12/12 Python
python 将数据保存为excel的xls格式(实例讲解)
2018/05/03 Python
python输出带颜色字体实例方法
2019/09/01 Python
python Pillow图像处理方法汇总
2019/10/16 Python
彻底解决Python包下载慢问题
2020/11/15 Python
用HTML5制作一个简单的弹力球游戏
2015/05/12 HTML / CSS
农村婚礼证婚词
2014/01/08 职场文书
初中地理教学反思
2014/01/11 职场文书
单位实习证明怎么写
2014/01/17 职场文书
八一演出活动方案
2014/02/03 职场文书
建议书的格式
2014/05/12 职场文书
治庸问责心得体会
2014/09/12 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang