选择ExtJs后更改图像 [英] Changing images after selecting ExtJs

问题描述

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

How can I preview images in ExtJs ? I mean, I am using FileUploadField and I want to select an image and set a place to show the image selected in my form.

推荐答案

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

You will need to handle file upload field's event to read event and retrieve image as data URL and set it manually to image component.

以下是使用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

这篇关于选择ExtJs后更改图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！