extjs上传图片显示缩略图

Ext.create('Ext.form.Panel', {
    title: 'Image Upload',
    width: 400,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'filefield',
        name: 'photo',
        fieldLabel: 'Photo',
        buttonText: 'Select Photo',
        listeners: {
            change: function(field, value) {
                var file = field.fileInputEl.dom.files[0];
                if (file) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        var img = new Image();
                        img.src = e.target.result;
                        img.onload = function() {
                            var canvas = document.createElement('canvas');
                            var ctx = canvas.getContext('2d');
                            var maxWidth = 100;
                            var maxHeight = 100;
                            var width = img.width;
                            var height = img.height;

                            if (width > height) {
                                if (width > maxWidth) {
                                    height *= maxWidth / width;
                                    width = maxWidth;
                                }
                            } else {
                                if (height > maxHeight) {
                                    width *= maxHeight / height;
                                    height = maxHeight;
                                }
                            }

                            canvas.width = width;
                            canvas.height = height;
                            ctx.drawImage(img, 0, 0, width, height);

                            // 将缩略图显示在页面上
                            Ext.get('thumbnail').setHtml(canvas.toDataURL());
                        };
                    };
                    reader.readAsDataURL(file);
                }
            }
        }
    }],
    buttons: [{
        text: 'Upload',
        handler: function() {
            // 处理上传逻辑
        }
    }]
});

// 添加一个用于显示缩略图的容器
Ext.get('thumbnail').createChild({
    tag: 'img',
    width: 100,
    height: 100
});