ExtJS FormPanel帶文件上傳旁邊的圖像縮略圖

我有一個基本上由FileUpload組成的FormPanel。我想要做的是：編輯時，在文件上傳字段的右側顯示已上傳圖像的縮略圖。我的項目是這樣的：ExtJS 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中，但是我不知道這樣做的最好方法是什麼？

任何想法都非常歡迎！

來源

2012-07-19 Doa

您需要決定是否要支持舊瀏覽器。

如果你這樣做，你必須提交表單到服務器（它上傳圖像），並讓服務器返回圖像的url，然後將其設置爲圖像的src。這是通過隱藏的IFrame完成的，所以頁面不會刷新。

現代的HTML5方式是使用FileReader api在上傳之前讀取圖像並將其設置爲圖像的src（作爲數據管理），然後使用XmlHttpRequest Level 2上傳它。使用FormData類。

要獲取文件字段旁邊的圖像，可以使用列或hbox佈局。這對你而言是浮動的。

來源

2012-07-19 17:04:19

ExtJS FormPanel帶文件上傳旁邊的圖像縮略圖

回答

相關問題