解决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 动态改变图片大小
Jun 11 Javascript
利用jQuery 实现GridView异步排序、分页的代码
Feb 06 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
Dec 11 Javascript
通过实例理解javascript中没有函数重载的概念
Jun 03 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 Javascript
原生js实现购物车
Sep 23 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 Javascript
Javascript中的奇葩知识,你知道吗?
Jan 25 Javascript
用JS写一个发布订阅模式
Nov 07 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
Zerg基本策略
2020/03/14 星际争霸
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
JavaScript 学习笔记之数据类型
2015/01/14 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
React组件的三种写法总结
2017/01/12 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
django框架两个使用模板实例
2019/12/11 Python
python3 字符串知识点学习笔记
2020/02/08 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
2014年大学生四年规划书范文
2014/04/03 职场文书
安全演讲稿开场白
2014/08/25 职场文书
授权委托书
2014/09/17 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书
新年寄语2016
2015/08/17 职场文书
责任书格式
2019/04/18 职场文书
浅谈Redis中的RDB快照
2021/06/29 Redis
详解PyTorch模型保存与加载
2022/04/28 Python