张小咩的小姿生活
复制代码 代码如下:
{
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;
}
}
