解决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 相关文章推荐
jquery默认校验规则整理
Mar 24 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
深入分析node.js的异步API和其局限性
Sep 05 Javascript
js实现彩色条纹滚动条效果
Mar 15 Javascript
利用js编写网页进度条效果
Oct 08 Javascript
微信小程序实战篇之购物车的实现代码示例
Nov 30 Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 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
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
PHP+jQuery翻板抽奖功能实现
2015/10/19 PHP
form自动提交实例讲解
2017/07/10 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
js获取视频时长代码
2014/04/10 Javascript
Bootstrap中CSS的使用方法
2016/02/17 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
win10 64bit下python NLTK安装教程
2018/09/19 Python
kali中python版本的切换方法
2019/07/11 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
如何开启linux的ssh服务
2013/06/03 面试题
高二美术教学反思
2014/01/14 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
2014年个人工作总结报告
2014/11/27 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
Oracle配置dblink访问PostgreSQL的操作方法
2022/03/21 PostgreSQL