解决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 相关文章推荐
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 Javascript
jQuery之ajax删除详解
Feb 27 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
Vue+SpringBoot开发V部落博客管理平台
Dec 27 Javascript
node 命令方式启动修改端口的方法
May 12 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
Mar 29 Javascript
Vue注册组件命名时不能用大写的原因浅析
Apr 25 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 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
php实现图片以base64显示的方法
2016/10/13 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
PHP日志LOG类定义与用法示例
2018/09/06 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
js模拟类继承小例子
2010/07/17 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
js实现超简单的展开、折叠目录代码
2015/08/28 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
python用户管理系统的实例讲解
2017/12/23 Python
Django框架模板介绍
2019/01/15 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
如何通过python画loss曲线的方法
2019/06/26 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
Python实现自动访问网页的例子
2020/02/21 Python
Python气泡提示与标签的实现
2020/04/01 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
经济学博士求职自荐信范文
2013/11/23 职场文书
大学生个人实习的自我评价
2014/02/15 职场文书
卫生标语大全
2014/06/21 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电
Python中itertools库的四个函数介绍
2022/04/06 Python
Nginx 常用配置
2022/05/15 Servers