解决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 相关文章推荐
仿淘宝TAB切换搜索框搜索切换的相关内容
Sep 21 Javascript
使用javascript实现判断当前浏览器
Apr 14 Javascript
jQuery模拟窗口抖动效果
Mar 15 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
zTree获取当前节点的下一级子节点数实例
Sep 05 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
vue.js 中使用(...)运算符报错的解决方法
Aug 09 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
JS+HTML5 canvas绘制验证码示例
Dec 05 Javascript
微信小程序中使用echarts的实现方法
Apr 24 Javascript
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
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异步多线程swoole用法实例
2014/11/14 PHP
ThinkPHP模型详解
2015/07/27 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
2013/04/21 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
使用AngularJS 应用访问 Android 手机的图片库
2015/03/24 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
2015/08/24 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
python实现对输入的密文加密
2019/03/20 Python
ipython和python区别详解
2019/06/26 Python
Python中的self用法详解
2019/08/06 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
详解python中*号的用法
2019/10/21 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
浅谈SciPy中的optimize.minimize实现受限优化问题
2020/02/29 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
世界上最好的足球商店:Unisport
2019/03/02 全球购物
sort命令的作用和用法
2012/11/04 面试题
初中同学聚会感言
2014/02/11 职场文书
材料工程专业毕业生求职信
2014/03/04 职场文书
聘任合同书
2015/09/21 职场文书
Mysql案例刨析事务隔离级别
2021/09/25 MySQL