2

我有一个 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" />');这样的方法来做到这一点这是最好的方法吗？

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

任何想法都非常受欢迎！

4

1 回答 1

3

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

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

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

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

于 2012-07-19T17:04:19.820 回答