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 相关文章推荐
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
Jul 25 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
js实现在页面上弹出蒙板技巧简单实用
Apr 16 Javascript
jQuery中after的两种用法实例
Jul 03 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
vue debug 二种方法
Sep 16 Javascript
JavaScript实现美化滑块效果
May 17 Javascript
如何从头实现一个node.js的koa框架
Jun 17 Javascript
解决vue自定义指令导致的内存泄漏问题
Aug 04 Javascript
Vue的Options用法说明
Aug 14 Javascript
canvas绘制折线路径动画实现
May 12 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
使用adodb lite解决问题
2006/12/31 PHP
PHP CURL模拟GET及POST函数代码
2010/04/25 PHP
PHP中文分词的简单实现代码分享
2011/07/17 PHP
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
提交表单时执行func方法实现代码
2013/03/17 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
javascript如何创建对象
2016/08/29 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
Python多线程编程(五):死锁的形成
2015/04/05 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
生产班组长岗位职责
2014/01/05 职场文书
员工拾金不昧表扬信
2014/01/09 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书