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


Posted in Javascript onMarch 22, 2012
{ 
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; 
} 
}
Javascript 相关文章推荐
javascript知识点收藏
Feb 22 Javascript
jquery 最简单易用的表单验证插件
Feb 27 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 Javascript
jQuery设计思想
Mar 07 Javascript
基于滚动条位置判断的简单实例
Dec 14 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
Javascript如何递归遍历本地文件夹
Aug 06 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
Mar 21 #Javascript
ejs v9 javascript模板系统
Mar 21 #Javascript
js判断一个元素是否为另一个元素的子元素的代码
Mar 21 #Javascript
HTML中的setCapture和releaseCapture使用介绍
Mar 21 #Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
Mar 21 #Javascript
js对象关系图 方便dom操作
Mar 18 #Javascript
再谈javascript面向对象编程
Mar 18 #Javascript
You might like
跟我学Laravel之快速入门
2014/10/15 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
python中time、datetime模块的使用
2020/12/14 Python
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
P/Invoke是什么
2015/07/31 面试题
大学同学聚会邀请函
2014/01/19 职场文书
秋季运动会稿件
2014/01/30 职场文书
师范生求职信
2014/06/14 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
销售员岗位职责范本
2015/04/11 职场文书
go xorm框架的使用
2021/05/22 Golang