angular框架中,使用FileReader时,图片预览,会出现上传图片后,再点击上传图片才显示
2017-10-24 15:49
851 查看
我这里是通过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);
在测试一下 果然没问题了
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);
在测试一下 果然没问题了
相关文章推荐
- java使用FileReader上传图片,可支持预览,支持多张上传
- JavaScript使用FileReader实现图片上传预览效果
- HTML5使用FileReader预览上传的图片文件
- HTML使用FileReader对象的readAsDataURL()方法实现图片的上传预览效果
- ASP.NET MVC 中使用 AjaxFileUpload 插件时,上传图片后不能显示(预览)
- JavaScript使用FileReader对象实现图片上传预览
- 使用js和jquery实现点击图片上传及预览
- android FileReader 读取图片资源显示预览失败解决方法
- 使用FileReader实现前端图片预览
- 利用html5的FileReader对象实现图片预览,利用FormData对象结合struts2实现无刷新文件上传(多参数)
- js使用file上传图片-----(1)选择文件类型的判断和图片的显示
- html5的FileReader实现图片上传预览并生成base64
- FileReader+Ajax+PHP实现异步上传图片和预览
- 利用FileReader实现图片预览上传
- js上传图片&预览(filereader)
- AngularJS+FileReader实现图片上传
- 使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)
- HTML5 之 FileReader 的使用 (二) (网页上图片拖拽并且预显示可在这里学到) [转载]
- HTML5 之 FileReader 的使用 (网页上图片拖拽并且预显示可在这里学到) [转载]
- 利用FileReader和FormData实现图片预览和上传(base64转二进制文件)