angular框架中,使用FileReader时,图片预览,会出现上传图片后,再点击上传图片才显示
来源:互联网 发布:java parcelable 编辑:程序博客网 时间:2024/05/29 02:10
我这里是通过FileReader获取图片的base64编码,赋值给img的src属性的,以此来进行预览
html代码:
<img src="{{vm.imageData}}" alt="" style="width: 90px;height: 75px;">
<input type="file" accept="image/gif,image/png,image/jpeg,image/jpg" ngf-select ng-model="vm.file" ng-change="vm.uploadFile()">
JS代码
var reader = new FileReader; reader.onload = function (e) { vm.imageData = e.target.result; } reader.readAsDataURL(vm.file);但是图片反复上传之后会出现图片上传后还是显示上一张,不显示最新的图片,再点击上传按钮的时候才会显示;
我想到的是数据绑定刷新的不及时,
就在js上加上一个脏检查,
var reader = new FileReader; reader.onload = function (e) { $scope.$apply(function () { vm.imageData = e.target.result; }) } reader.readAsDataURL(vm.file);
在测试一下 果然没问题了
阅读全文
0 0
- angular框架中,使用FileReader时,图片预览,会出现上传图片后,再点击上传图片才显示
- FileReader图片预览上传
- FileReader上传图片预览
- 图片上传后预览
- FileReader实现上传图片时的图片预览
- HTML5使用FileReader预览上传的图片文件
- JavaScript使用FileReader对象实现图片上传预览
- 上传文件点击后显示图片
- 上传文件点击后显示图片
- 图片上传后即时预览
- 上传图片时预览
- 图片上传+图片预览
- H5 FileReader 上传图片
- FileReader多图片上传
- Extjs图片上传显示预览
- jQuery上传图片显示预览
- angularjs上传图片时预览-点击图片放大
- 图片上传时,本地显示预览功能
- maven创建项目常见问题
- Kotlin类和对象 (二)--- 接口
- R语言语法基础(一)
- JSON强转 <T>任意类
- Java虚拟机安全性-class文件检验器
- angular框架中,使用FileReader时,图片预览,会出现上传图片后,再点击上传图片才显示
- Instrumenting Java Bytecode with ASM
- 为什么程序员也能成为伟大的CEO
- JS控制文本框:输入银行卡号,4位自动加上空格分隔
- sort、uniq对汉字不生效
- SeleniumIDE 使用
- bzoj 4813: [Cqoi2017]小Q的棋盘 树形dp
- memset用法小结
- 前端左右列表联动,目前没有找到好的插件,以后使用到的话自己使用原生的js,html,css写