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

ExtJS FormPanel with image thumbnail next to file upload

本文关键字：图像 略图 FormPanel 文件 ExtJS      更新时间：2023-12-18

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

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

我需要做两件事：

  • 在"预览图像"组件中加载图像，我会通过this['PreviewImage'].update('<img src="image.png" />');这样的方法来完成这项工作。这是最好的方法吗？

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

任何想法都非常欢迎！

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

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

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

要获得文件字段旁边的图像，可以使用列或hbox布局。这对你来说是漂浮的。

相关文章：