画像アップロード4

Question

画像をアップロードして、base64文字列のExtJSのリスナーと、ここでいくつかのコードに画像を変換する方法：私はbtoa機能を追加しよう

xtype: 'filefield', 
id: 'image', 
emptyText: '-- Choose Image --', 
fieldLabel: 'Photo', 
name: 'image', 
anchor: "82%", 
buttonText: 'Browse', 
buttonConfig: { 
iconCls: '' 
}, 
change: function() { 
// this is get component 
var valueElement = Ext.getCmp("component_image_upload").getValue(); 

// function upload image full path and encode to base64 
// function here 

// result to encode base64 
var GenEncoded = valueElement; 
Ext.getCmp("component_textarea").setValue(GenEncoded); 

それだけで変換FileFieldに上ではなく、画像をアップロードするための文字列：

// result to encode base64 
var GenEncoded = btoa(valueElement); 
Ext.getCmp("ttransdelivery_module_manualreceive_form_receive_ar_1_general_blk_i_form_text_2031").setValue(GenEncoded); 

は、あなたがこのためにFileAPIを使用することができます

Answer 1

ありがとうございます。ただし、すべてのブラウザでサポートされているわけではありません。サポートについてはcaniuseを確認してください。

これは動作するはずです：

change: function() { 
    var valueElement = Ext.getCmp("component_image_upload").getValue(); 
    var reader = new FileReader(); 

    reader.onload = function(e) { 
     Ext.getCmp("component_textarea").setValue(e.target.result); 
    }; 
    reader.onerror = function(e) { 
     //error reading file 
    }; 

    reader.readAsDataURL(valueElement.el); 
} 

詳細はFileReaderのAPIをチェックしてください。

Answer 2

ありがとうございます、これは私のリスナーコードです。このコード作業：ヘルプメイト

ため

change: function() { 
    var valueElement = Ext.getCmp('image').getEl().down('input[type=file]').dom.files[0];    
    var reader = new FileReader(); 

    reader.onload = function(e) { 
      Ext.getCmp("ttransdelivery_module_manualreceive_form_receive_ar_1_general_blk_i_form_text_2031").setValue(e.target.result); 
    }; 
    reader.onerror = function(e) { 
      alert('The File APIs are not fully supported in this browser.'); 
    }; 

    reader.readAsDataURL(valueElement); 
} 

感謝