Javascript 选择ExtJs后更改图像
如何在ExtJs中预览图像?我的意思是,我正在使用FileUploadField,我想选择一个图像并设置一个位置来显示在我的表单中选择的图像 您需要处理文件上载字段的事件,以读取事件并检索图像作为数据URL,并手动将其设置为图像组件 下面是使用ExtJS 5.x实现这一点的工作代码:Javascript 选择ExtJs后更改图像,javascript,php,extjs,Javascript,Php,Extjs,如何在ExtJs中预览图像?我的意思是,我正在使用FileUploadField,我想选择一个图像并设置一个位置来显示在我的表单中选择的图像 您需要处理文件上载字段的事件,以读取事件并检索图像作为数据URL,并手动将其设置为图像组件 下面是使用ExtJS 5.x实现这一点的工作代码: Ext.application({ name: 'Fiddle', launch: function () { Ext.create('Ext.panel.Panel', {
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: "FileUpload Filed with Image Preview",
items: [{
xtype: "filefield",
listeners: {
'change': function (newVal) {
var file = newVal.fileInputEl.el.dom.files[0];
var reader = new FileReader();
console.log(reader);
reader.readAsDataURL(file);
reader.onload = function (evt) {
var image = Ext.getCmp("imageid");
image.setSrc(evt.target.result);
}
}
}
}, {
id: "imageid",
xtype: "image",
style: "border: 1px solid black",
width: 500,
minHeight: 200,
height: 'auto'
}]
});
}
});
工作小提琴:谢谢。这正是我想要的。