Extjsでアップロードした画像がプレビューできない問題の解決方法

Extjsでアップロードした画像がプレビューできない問題の解決方法_extjs

WBOY

リリース： 2016-05-16 17:55:10

オリジナル

1454 人が閲覧しました

コードをコピーコードは次のとおりです:

 
{ 
width: 450, 
fileUpload : true、
fieldLabel: '画像を選択'、
items: [{ 
xtype: 'textfield'、
id: 'up_forth'、
name: 'up_forth'、
 inputType: ' file', 
width: 300 
}] 
} 

プレビューボックス

コードをコピーコードは次のとおりです:

 
{ 
columnWidth: .18, 
bodyStyle: ' margin:4px 10px 10px 5px', 
layout : 'form', 
items: [{ 
xtype: 'box', 
autoEl: { 
width: 150, height: 150, 
tag: 'div', 
 id: 'browser_up_forth' 
} 
}] 
} 

myfrom はアップロードコントロールを囲む FormPanel を表し、control_id はアップロードコントロールの ID を表します。このメソッドをプログラムでプレビューして登録するだけです。 ,review (myfrom,'up_forth' );

コードをコピーします。は次のとおりです: varreview = function (myform, control_id) {

var img_reg = /.([jJ][pP][gG]){1}$|.([ jJ][pP][eE][gG]){1} $|.([gG][iI][fF]){1}$|.([pP][nN][gG]){1}$ |.([bB][mM][pP]){1 }$/

myform.on('render', function (f) { 
myform.form.field(control_id).on('render ', function () { 
Ext.get(control_id) .on('change', function (field, newValue, oldValue) { 
var obj = Ext.get(control_id).dom; 
var url = getFullPath(obj); 
if (img_reg.test (url)) { 
var newPreview = Ext.get('browser_' control_id).dom; 
var showPic = Ext.get("showPic_ " control_id); 
if (showPic != null) { 
showPic.remove();//元の画像を削除します
} 
var imgDiv = document.createElement("div"); 
imgDiv.id = "showPic_" control_id; 
ドキュメント .body.appendChild(imgDiv); 
imgDiv.style.height = "150px"; 🎜>imgDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod =scale)"; 
imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = url; appendChild(imgDiv); 
} 
}, this ); 
}, this); 
} 

// 画像アドレスを取得します🎜>function getFullPath(obj) { 
if (obj) { 
// ie 
if (window.navigator.userAgent.indexOf("MSIE") >= 1) { 
obj. select(); 
return document.selection.createRange().text; 
} 
// Firefox 
else if (window.navigator.userAgent.indexOf("Firefox") > ) { 
if (obj.files) { 
return obj.files.item(0).getAsDataURL(); 
} 
return 
} 
return obj .value; 
} 
} 