ExtJs - ファイルフィールドから選択したファイルを保存

Question

extjs6モダンツールキットを使用してファイルをアップロードします。そのため、私はMessageBoxをファイルチューザで表示します。 [OK]ボタンをクリックして（HTTP POSTなど）アップロードした後、選択したファイルをJavaScriptオブジェクトに取り込むにはどうすればよいですか？

this.createUploadMsgBox("File Upload", function (clickedButton) { 
    if (clickedButton == 'ok') { 
     console.log("file: " + file); 
    } 

createUploadMsgBox: function (title, callback) { 
     Ext.Msg.show({ 
      title: title, 
      width: 300, 
      buttons: Ext.MessageBox.OKCANCEL, 
      fn: callback, 
      items: [ 
       { 
        xtype: 'filefield', 
        label: "File:", 
        name: 'file' 
       } 
      ] 
     }); 
    } 

あなたはここに私の例をRUMことができます。

https://fiddle.sencha.com/#view/editor&fiddle/1kro

Answer 1

次の2つのとりうる解決策を持っています。

formを使用し、form.submit()（送信前にform.isValid()を使用）でファイルを送信します。 MultipartFileを使用して、サーバー内のファイルを取り出すことができます。

もう1つの方法はJS File APIです。あなたcreateUploadMsgBox機能で：fileオブジェクトで

this.createUploadMsgBox("File Upload", function (clickedButton) { 
    if (clickedButton == 'ok') { 
     //console.log("file: " + file); 
     var filefield = Ext.ComponentQuery.query('filefield')[0]; 
     var file = filefield.el.down('input[type=file]').dom.files[0]; 
     var reader = new FileReader(); 
     reader.onload = (function(theFile) { 
      return function(e) { 
       console.log(e.target.result); 
      }; 
     })(file); 
     reader.readAsBinaryString(file); 
    } 
}); 

あなたは、ファイルの基本的な情報を持っている、そしてあなたは、コンソールにファイルの内容が表示されます。

希望すると便利です。