解决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 document.referrer判断访客来源网址
May 15 Javascript
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
JQuery 图片的展开和伸缩实例讲解
Apr 18 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
Dec 08 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 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
PHP4(windows版本)中的COM函数
2006/10/09 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
node.js中watch机制详解
2014/11/17 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
2020/05/13 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
python异步任务队列示例
2014/04/01 Python
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
Python实现批量下载图片的方法
2015/07/08 Python
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
财务与信息服务专业推荐信
2013/11/28 职场文书
工程项目经理岗位职责
2013/12/15 职场文书
计算机专业毕业生自荐信
2013/12/31 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书
付款委托书范本
2014/10/05 职场文书
老人与海读书笔记
2015/06/26 职场文书
同步小康驻村工作简报
2015/07/20 职场文书
高中体育课教学反思
2016/02/16 职场文书
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python
Python使用海龟绘图实现贪吃蛇游戏
2021/06/18 Python
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android