2

基本的にFileUploadで構成されるFormPanelがあります。私がやりたいのは次のとおりです。編集するときは、ファイルアップロードフィールドの右側に、すでにアップロードされている画像のサムネイルを表示します。私のアイテムは次のようになります：

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

私は2つのことをする必要があります：

  • '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 に答える