javascript - 文件上传旁边带有图像缩略图的 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" />'); 的方式来执行此操作这是最好的方法吗？

• 让图像 float 到上传字段的右侧。我不确定最好的方法是什么？我想过将这两个元素都放在一个面板中，但同样，我不知道这样做的最佳方法是什么？

非常欢迎任何想法!

Answer 1

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

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

现代的 HTML5 方法是在上传图像之前使用 FileReader api 读取图像并将其设置为图像的 src(作为数据 url)，然后使用 XmlHttpRequest Level 2 上传图像。使用 FormData 类。

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