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 相关文章推荐
jquery实现table鼠标经过变色代码
Sep 25 Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
Jan 08 Javascript
angular第三方包开发整理(小结)
Apr 19 Javascript
vue如何引入sass全局变量
Jun 28 Javascript
面试题:react和vue的区别分析
Apr 08 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 Javascript
微信小程序入门之绘制时钟
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下保存远程图片到本地的办法
2010/08/08 PHP
php一个找二层目录的小东东
2012/08/02 PHP
PHP中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
Python兔子毒药问题实例分析
2015/03/05 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
竞选演讲稿范文
2013/12/28 职场文书
党校学习思想汇报
2014/01/06 职场文书
毕业自我评价
2014/02/05 职场文书
统计系教授推荐信
2014/02/28 职场文书
护士感人事迹
2014/05/01 职场文书
2014年师德承诺书
2014/05/23 职场文书
个人债务授权委托书范本
2014/10/05 职场文书
感谢信格式范文
2015/01/22 职场文书
房屋认购协议书
2015/01/29 职场文书
导游词之镜泊湖
2019/12/09 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python