在进行图片上传时,通常需要进行预览。而这种预览的行为通常是预览客户端的本地资源。下面就讲一下在Ext中是如何实现图片上传预览的。
首先,创建为预览图片创建一个控件:
代码如下 xtype : "box",
id : "logoPic",
width : 150,
height : 200,
autoEl : {
tag : "img",
src : currentLogoPath,
style : "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);"
}
然后再创建一个图片上传的控件:
代码如下 xtype : "textfield",id : "logoFile",
name : "logoFile",
inputType : "file",
fieldLabel : " 商社标志文件",
width : 280,
listeners : {
"render":function(){
var logoFileCmp = Ext.get("logoFile");
logoFileCmp.on("change",function(field,newValue,oldValue){
var picPath = logoFileCmp.getValue();
var url = "file:///" + picPath;
if(Ext.isIE){
var image = Ext.get("logoPic").dom;
image.src = Ext.BLANK_IMAGE_URL;
image.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = url;
}else{
//支持FF
Ext.get("logoPic").dom.src =Ext.get("logoFile").dom.files.item(0).getAsDataURL();
}
},this);
}
}
为文件上传控件添加一个change事件。注意,在这里一定要用Ext.get方法取得控件,否则change事件会无效的。当有图片上传时,控件的值会发生改变,然后修改预览控件的src的值,以实现图片预览。
Extjs解决上传图片预览
网上找了好多EXTJS上传图片预览的,但都不行,,,下面虽然IE8可以但肯定还存在其它浏览器的兼容性问题,待搁应付一下吧。。
代码如下{
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;
}
}
这样就解决了extjs上传图片无法正常预览的问题。
extjs上传图片预览与解决无法显示_Extjs上传图片预览与解决无法预览
http://m.bbyears.com/wangyezhizuo/34044.html
推荐访问: