解决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 相关文章推荐
struts2 jquery 打造无限层次的树
Oct 23 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
JavaScript prototype 使用介绍
Aug 29 Javascript
js禁止回车提交表单的示例代码
Dec 23 Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 Javascript
网络传输协议(http协议)
Nov 18 Javascript
jquery实现图片平滑滚动详解
Mar 22 jQuery
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 Javascript
JavaScript实现职责链模式概述
Jan 25 Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 Javascript
JavaScript Dom实现轮播图原理和实例
Feb 19 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
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
php操作JSON格式数据的实现代码
2011/12/24 PHP
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
Python工程师面试题 与Python Web相关
2016/01/14 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
python基于http下载视频或音频
2018/06/20 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
python中树与树的表示知识点总结
2019/09/14 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
师范生自我鉴定范文
2013/10/05 职场文书
出纳员岗位责任制
2014/02/11 职场文书
计划生育宣传标语
2014/06/21 职场文书
考研导师推荐信范文
2015/03/27 职场文书
教师理论学习心得体会
2016/01/21 职场文书
导游词之潮音寺
2019/09/26 职场文书