位置: 编程技术 - 正文

AngularJS实现图片上传和预览功能的方法分析(angular 图片懒加载)

编辑:rootadmin

推荐整理分享AngularJS实现图片上传和预览功能的方法分析(angular 图片懒加载),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:angular点击图片放大,angularjs4,angular jsx,angularjs $q,angularjs4,angularjs4,angular图片上传,angular 图片懒加载,内容如对您有帮助,希望把文章链接给更多的朋友!

本文实例讲述了AngularJS实现图片上传和预览功能的方法。分享给大家供大家参考,具体如下:

html5原生方法

先看一下html5原生方法上传和预览图片的实现:

我们看到,需要用到onchange事件来获得上传的文件,当项目使用上angularjs时,很自然的,我们想到了ng-change指令,然而不幸的是,在angularjs中,<input type="file">不支持ng-model和ng-change指令(附录1),这就使得文件上传变得有些复杂了。

angularjs方法

这里使用开源的 angular-file-upload 模块来实现,步骤如下:

1、安装 angular-file-upload 模块

AngularJS实现图片上传和预览功能的方法分析(angular 图片懒加载)

2、添加到应用依赖

3、HTML代码

这里,nv-file-select=""表示使用angular-file-upload模块的文件选择方式上传,参考官方例子

4、controller代码

可以看到,我们通过onAfterAddingFile回调函数获得所选的图片文件,接下来把图片文件转成datauri,再更新<img>标签的src属性即可。

值得注意的是,我们把“更新<img>标签的src属性”这个任务放到了$scope.$apply方法中执行,这是因为在angular框架外部(如在浏览器DOM事件中, setTimeout, XHR 或者 第三方框架中)更新数据,angular是不会同步更新绑定的。这点可以参考angular $apply reference

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

浅谈vue2 单页面如何设置网页title 前端框架如Vue、React等都是单页面的应用,也就是说整个web站点其实都是一个index页面,所谓的页面跳转都是替换index.html里边的内容,而页面的title是在

Angularjs渲染的 using 指令的星级评分系统示例 本文介绍Angularjs渲染的using指令的星级评分系统示例,分享给大家,具体如下:我试图创建静态使用angularjs/离子成效甚微的星级评分系统。但目前什么

基于vue配置axios的方法步骤 axios简介axios是一个基于Promise用于浏览器和nodejs的HTTP客户端,它本身具有以下特征:从浏览器中创建XMLHttpRequest从node.js发出http请求支持PromiseAPI拦截请求

标签: angular 图片懒加载

本文链接地址:https://www.jiuchutong.com/biancheng/377356.html 转载请保留说明!

上一篇:详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css(vue-cli作用)

下一篇:浅谈vue2 单页面如何设置网页title(vuejs单页面)

  • 当期所得税计入什么科目
  • 房屋租金可以开发票吗
  • 银行对账单由谁去取
  • 税后平均投资利息怎么算
  • 现金余额本月金额和本年累计金额怎么填
  • 完工百分比法完工进度怎么算
  • 科技公司的成本如何核算
  • 固定资产盘点账实不符
  • 股票投资会计科目
  • 制造费用包括哪三类
  • 增值税当月抵扣吗
  • 事业单位取得了应税收入如何纳税?
  • 免抵税额是否能抵销项税额呢?
  • 应征增值税不含税销售额是什么意思
  • 差额征税条件
  • 印花税扣款
  • 分期付款购买商品房后续没钱还怎么办
  • 固定资产改造更新是否需要计提折旧
  • 个人其他应收款在贷方表示什么
  • 先收到发票后到货分录
  • 公司基本户买理财产品,怎么记账
  • 公益性捐赠包括向脱贫地区捐赠吗
  • 怎么用红字信息表开红字发票
  • 不缴或少缴应纳税款的行为属于
  • 专票和普票都要交税吗
  • 收据可以入账的文件
  • 物业公司预收款增值税纳税义务发生时间
  • win10为什么毛病这么多
  • 生物制品可以开箱验货吗
  • 股东分红个税怎么做账
  • 应收账款转让分录
  • 换购商品分录怎么做
  • 支付给其他公司的工程项目管理费
  • php教程100
  • php stristr函数
  • 代理记账费用计入什么会计科目
  • 一般股份支付的确认计量及帐务处理怎么做
  • php set_time_limit
  • React hooks中 useState踩坑-=--异步问题
  • 目标检测现状
  • 收到银行开的手续费发票怎么做分录
  • 企业清算所得税申报表填写案例
  • es6新增了什么
  • 客户购买商品的条件?
  • 未开票金额怎么填写
  • 红字写信是什么意思
  • 企业的所有分类
  • 核定征收需要申报吗
  • 仓库出入库账本怎么做
  • 医疗机构销售药品是否征收增值税
  • sql字符串处理函数
  • 一般劳务报酬个人所得税退税吗
  • 会计核算的作用,意义
  • 电商商品采购流程
  • 原始凭证的审核内容
  • 先收发票后付款怎么做分录
  • 空头支票如何处罚
  • sql server 用法
  • 利用pt-heartbeat监控MySQL的复制延迟详解
  • win10系统设置快捷键
  • 师说词类活用
  • 简述linux几种主流发行版本及其特点
  • centos运行文件
  • xp系统分区工具
  • u盘制作iso镜像文件启动
  • windows下键盘不能用
  • cf游戏截图在哪个文件夹
  • windos8怎么样
  • Win7系统启动qq无法访问个人文件怎么解决
  • win7系统更新补丁会解决游戏卡顿的问题吗
  • linux系统获取ip地址
  • 修改注册表命令
  • a10 config backup for aXAPI
  • 需要牢记的号码
  • Errors running builder 'Android Resource Manager' on Project java.lang.NullPointerException
  • javascript基础笔记
  • 安卓开发例子
  • 江西省企业社会保险费缴费指南
  • 税票开户银行怎么填写?
  • 江西医保在线缴费
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设