首页 / 脚本样式 / JavaScript / 解决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;
}
}