ExtJS FormPanel带文件上传旁边的图像缩略图

Question

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

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（作为数据管理），然后使用XmlHttpRequest Level 2上传它。使用FormData类。

要获取文件字段旁边的图像，可以使用列或hbox布局。这对你而言是浮动的。