extJs表示フィールドに画像が表示されない

Question

ユーザー画像を表示するためのコードを記述しました。 ローカルマシン上で選択/ブラウジングした後にユーザーイメージを表示したいが、ブラウズ後に表示されない。私は理解を深めるためにいくつかのコードを置いた。私は、閲覧ユーザ画像に使用するコードの上

this.userPhoto = new Ext.create('Ext.form.field.File', { 
      xtype: 'filefield', 
      padding: '5 5 5', 
      cls: 'p-photo-upload', 
      emptyText: 'Photo', 
      buttonOnly: true, 
      fieldLabel: fleet.Language.get('_FLEET_USER_USERDETAIL_PHOTO_'), 
      name: 'photo', 
      labelWidth: 200, 
      width: '26%', 
      msgTarget: 'under', 
      listeners: { 
       scope: this, 
       change: function (t, value) { 
        var img = '<img src="' + t.getValue() + '" />'; 
        console.log('image', img, value, t.getRawValue()); 
        //var img = '<img src="' + FLEET_SERVER_URL + 'images/users/DefaultUserIcon.jpg' + '" />'; 
        this.userimage.setValue(img); 
       } 
      } 
     }); 

。 =このIMG SRCのようにそのショーのパス画像を選択した後の変更リスナーでのイベントは、フィールドを表示する画像ファイルのパスを設定します（下の配置表示フィールドコード）

this.userimage = new Ext.form.field.Display({ 
      labelWidth: 200, 
      cls: 'p-uploaded-icon', 
      width: '28%', 
      height: 70, 
      labelAlign: 'right', 
      autoShow: true, 
      autoRender: true, 
      fieldLabel: fleet.Language.get('_FLEET_USER_USERDETAIL_ICON_'), 
      value: fleet.Language.get('_FLEET_USER_USERDETAIL_NOICON_') 
      //value: '<img src="' + FLEET_SERVER_URL + 'appRes/images/user.jpg' + '/>' 
     }); 

「C：\ fakepath \ boy.png」が、イメージではありません表示

Answer 1

@Tyrはすぐそこにオプションがあり、それはpluploadと呼ばれています（私はそれをサーバーにアップロードする前に画像のサムネイルを表示するようにそれを理解）あなたの目的のために、セキュリティ上の理由で、JavaScriptからファイルにアクセスするの手当に関するしている間。

私たちはできるだけ多くのHTML5をエミュレートするので、通常はサポートしていない環境でも、生ファイルデータへのアクセスを提供することができます。これの最大のメリットの1つは、ダイアログ内の画像を選択するか、&をデスクトップからドラッグすると、すぐにサムネイルを表示できることです。

私自身がこれをプロジェクトに取り入れました。 Hereは、それがどのように行われているか見るために調べることができるリポジトリです。また、有用なものを得ることができるpluploadとのインテグレーションsomeExtJSがあります。

Answer 2

セキュリティ上の理由から、アップロードする前にjavascriptで直接ファイルを表示することはできません。