解决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;
}
}
推荐阅读
-
关于一次上传多个图片的插件有没有?解决方法
-
Android圆形头像拍照后“无法加载此图片”的问题解决方法(适配Android7.0)
-
Linux inode 耗尽导致图片/文件无法上传的解决方法
-
Android圆形头像拍照后“无法加载此图片”的问题解决方法(适配Android7.0)
-
WordPress中"无法将上传的文件移动至"错误的解决方法
-
Win7系统Chrome浏览器无法显示网页图片的解决方法
-
关于安装LNMP集成包后上传图片报500错误的解决方法
-
搜狗浏览器无法上传附件或图片的解决方法
-
WordPress中"无法将上传的文件移动至"错误的解决方法
-
PHP在Windows IIS上传的图片无法访问的解决方法