欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

解决Extjs上传图片无法预览的解决方法

程序员文章站 2022-03-20 23:29:15
复制代码 代码如下: { width: 450, fileupload: true, fieldlabel: '选择图片', items: [{ xtype: 'textf...
复制代码 代码如下:

{
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;
}
}