如何在离子3上传前预览图像？
如何在离子3上传前预览图像？
提问于 2017-08-21 14:14:10
我正在尝试使用jquery上传和预览图像。但得到这个
误差
Property 'result' does not exist on type 'EventTarget'.
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}page.ts
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$('#file').on('change', function () {
readURL(this);
});page.html
<label for="file" class="lbl"><i class="fa fa-plus-circle"></i> Add Attachment</label>
<input type="file" id="file" style="visibility: hidden">
<img src="#" id="blah">解决办法是什么？？我认为这个代码是正确的，但问题只是‘结果’属性。提前感谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-08-21 16:09:06
不久前，我使用了下面的代码来预览Ionic的图像。
在HTML中：
<input type="file" value="" (change)="fileChange($event)">
<img *ngIf="img1" [src]="img1"/>在JavaScript中：
fileChange(event) {
if (event.target.files && event.target.files[0]) {
let reader = new FileReader();
reader.onload = (event:any) => {
this.img1 = event.target.result;
}
reader.readAsDataURL(event.target.files[0]); // to trigger onload
}
let fileList: FileList = event.target.files;
let file: File = fileList[0];
console.log(file);
}欢迎改进
Stack Overflow用户
发布于 2020-02-17 09:49:25
离子4
在html中
<img class="logo" src="{{img_new}}" *ngIf="img_new!=''"/>
<input type="file" name="image" accept="image/*" (change)="changeListener($event)">在ts中
changeListener($event): void {
this.file = $event.target.files[0];
console.log(this.file);
let reader = new FileReader();
reader.onload = ($event:any) => {
this.img_new = $event.target.result;
}
reader.readAsDataURL($event.target.files[0]);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45799326
复制相关文章
相似问题
腾讯云开发者
