解决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 基础篇之运算符、语句(二)
Apr 07 Javascript
Javascript 按位与赋值运算符 (&=)使用介绍
Feb 04 Javascript
js简单倒计时实现代码
Apr 30 Javascript
深入理解JS DOM事件机制
Aug 06 Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
jQuery解析json格式数据示例
Sep 01 jQuery
react 父子组件之间通讯props
Sep 08 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
webpack中如何加载静态文件的方法步骤
May 18 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 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
PHP n个不重复的随机数生成代码
2009/06/23 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
php商品对比功能代码分享
2015/09/24 PHP
php无限极分类实现方法分析
2019/07/04 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
javascript 多浏览器 事件大全
2010/03/23 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
Python实现批量下载图片的方法
2015/07/08 Python
详解Python多线程
2016/11/14 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
python如何实现图片压缩
2020/09/11 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
计算机应用专业推荐信
2013/11/13 职场文书
自我推荐书
2013/12/04 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
教师批评与自我批评
2014/10/15 职场文书
2014年环保工作总结
2014/11/26 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
归途列车观后感
2015/06/17 职场文书