解决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对象是否拥有某一个属性的js代码
Aug 16 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
Apr 10 Javascript
jquery查找tr td 示例模拟
May 08 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
Javascript简单改变表单元素背景的方法
Jul 15 Javascript
Vue键盘事件用法总结
Apr 18 Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 Javascript
react 原生实现头像滚动播放的示例
Apr 21 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学习笔记之字符串编码的转换和判断
2014/05/22 PHP
php数组转成json格式的方法
2015/03/09 PHP
完美的php分页类
2017/10/24 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
详解Vue中localstorage和sessionstorage的使用
2017/12/22 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
Python写入CSV文件的方法
2015/07/08 Python
python实现猜单词小游戏
2020/05/22 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
毕业生实习鉴定
2013/12/11 职场文书
员工培训心得体会
2013/12/30 职场文书
运动会广播稿200字
2014/01/15 职场文书
商场总经理岗位职责
2014/02/03 职场文书
低碳环保倡议书
2014/04/14 职场文书
操行评语大全
2014/04/30 职场文书
项目建议书怎么写
2014/05/15 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
转学证明范本
2015/06/19 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书