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实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
GRID拖拽行的实例代码
Jul 18 Javascript
jquery中获取id值方法小结
Sep 22 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
coffeescript使用的方式汇总
Aug 05 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
jQuery Plupload上传插件的使用
Apr 19 jQuery
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 Javascript
微信小程序canvas动态时钟
Oct 22 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+ACCESS 文章管理程序代码
2010/06/21 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
php实现mysql封装类示例
2014/05/07 PHP
php中动态变量用法实例
2015/06/10 PHP
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
2010/11/16 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场
2018/04/04 DOTA
python处理二进制数据的方法
2015/06/03 Python
在Django的上下文中设置变量的方法
2015/07/20 Python
由浅入深讲解python中的yield与generator
2017/04/05 Python
用Python实现随机森林算法的示例
2017/08/24 Python
python中模块的__all__属性详解
2017/10/26 Python
python读取文本中数据并转化为DataFrame的实例
2018/04/10 Python
Python requests设置代理的方法步骤
2020/02/23 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
python类共享变量操作
2020/09/03 Python
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
幼儿园植树节活动总结
2014/07/04 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
教师节横幅标语
2014/10/08 职场文书
客服专员岗位职责
2015/02/10 职场文书
思想道德自我评价2015
2015/03/09 职场文书
兴趣班停课通知
2015/04/24 职场文书
工作失职检讨书范文
2015/05/05 职场文书