extjs显示oracle中的图片,不再服务器上生成文件,解决Extjs上传图片无法预览的解决方法...

复制代码 代码如下:

{

width: 450,

fileUpload: true,

fieldLabel: '选择图片',

items: [{

xtype: 'textfield',

id: 'up_forth',

name: 'up_forth',

inputType: 'file',

width: 300

}]

}

预览box

复制代码 代码如下:

{

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,, contril_id表示上传控件的ID，只要在程序上预览注册该方法就可以，preview (myfrom,'up_forth' );

复制代码 代码如下:

var preview = 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.findField(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;

document.body.appendChild(imgDiv);

imgDiv.style.width = "150px";

imgDiv.style.height = "150px";

imgDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";

imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = url;

newPreview.appendChild(imgDiv);

}

}, this);

}, 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") >= 1) {

if (obj.files) {

return obj.files.item(0).getAsDataURL();

}

return obj.value;

}

return obj.value;

}

}

时间： 2012-03-19