圖片上傳到Base64編碼的ExtJS的4

Question

如何上傳圖像和圖像轉換成的base64字符串，這裏一些代碼，使聽衆對ExtJS的：

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); 

我嘗試添加BTOA功能，但它只是轉換在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); 

謝謝

Answer 1

您可以使用FileAPI這一點。但請記住，它在所有瀏覽器中都不受支持。檢查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); 
} 

感謝您的幫助隊友