解决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 相关文章推荐
非常漂亮的JS代码经典广告
Oct 21 Javascript
动态表格Table类的实现
Aug 26 Javascript
jQuery 动画弹出窗体支持多种展现方式
Apr 29 Javascript
jQuery验证Checkbox是否选中的代码 推荐
Sep 04 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
label+input实现按钮开关切换效果的实例
Aug 16 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
关于vue 结合原生js 解决echarts resize问题
Jul 26 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 18 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 大数据量及海量数据处理算法总结
2011/05/07 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
js null,undefined,字符串小结
2010/08/21 Javascript
JavaScript 对象模型 执行模型
2010/10/15 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
用JavaScript修改CSS属性的代码
2013/05/06 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
js实现将选中内容分享到新浪或腾讯微博
2015/12/16 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
全面解析标签页的切换方式
2016/08/21 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
Anaconda入门使用总结
2018/04/05 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
python之语音识别speech模块
2020/09/09 Python
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
优秀员工表扬信
2014/01/17 职场文书
共产党员公开承诺书范文
2014/03/28 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
公司应聘求职信
2014/06/21 职场文书
认错检讨书
2014/10/02 职场文书
MySQL GRANT用户授权的实现
2021/06/18 MySQL
Go语言空白表示符_的实例用法
2021/07/04 Golang