ExtJS FormPanel，文件上传旁边有图像缩略图

Question

我有一个FormPanel，它基本上由一个FileUpload组成。我想要做的是：编辑时，在文件上传字段的右侧显示已上传图像的缩略图。我的项目看起来像这样：

items = [
{
    allowBlank: false,
    fieldLabel: 'Icon',
    hidden: true,
    name: 'Icon',
    ref: 'IconField',
    xtype: 'Ext.ux.form.FileUploadField'
},
{
    ref: 'PreviewImage',
};

我需要做两件事：

• 将图片加载到“PreviewImage”组件中，我会通过类似this['PreviewImage'].update('<img src="image.png" />');的方式执行此操作。这是最好的方法吗？

• 让图片浮动到上传字段的右侧。我不确定最好的方法吗？我想过把这两个元素放在一个Panel中，但是我不知道最好的方法是什么？

非常欢迎任何想法！

Answer 1

您需要决定是否要支持旧浏览器。

如果这样做，您必须将表单提交给服务器（上传图像），让服务器返回图像的URL，然后将其设置为图像的src。这是通过隐藏的IFrame完成的，因此页面不会刷新。

现代的HTML5方式是使用FileReader api在上传之前读取图像并将其设置为图像的src（作为dataurl），然后使用XmlHttpRequest Level 2上传它。使用FormData类。

要获取文件字段旁边的图像，可以使用列或hbox布局。那为你漂浮。