选择ExtJs后更改图像

Posted 2021-05-06

如何在ExtJs中预览图像？我的意思是，我正在使用FileUploadField，我想选择一个图像并设置一个位置来显示我的表单中选择的图像。

答案

您需要处理文件上载字段的事件以读取事件并将图像作为数据URL检索并手动将其设置为图像组件。

以下是使用ExtJS 5.x实现此目的的工作代码：

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'
            }]
        });
    }
});

工作小提琴：https://fiddle.sencha.com/#view/editor&fiddle/2ds2