解决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 相关文章推荐
清空上传控件input file的值
Jul 03 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
Oct 14 Javascript
js取整数、取余数的方法
May 11 Javascript
探讨js字符串数组拼接的性能问题
Oct 11 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
Oct 25 Javascript
浅谈JS继承_借用构造函数 & 组合式继承
Aug 16 Javascript
Vue.JS入门教程之自定义指令
Dec 08 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
vue生命周期和react生命周期对比【推荐】
Sep 19 Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 Javascript
Vue Components 数字键盘的实现
Sep 18 Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
php递归创建目录的方法
2015/02/02 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
php DES加密算法实例分析
2019/09/18 PHP
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
2010/07/29 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
vue.js实例对象+组件树的详细介绍
2017/10/20 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
在Python的Django框架中编写错误提示页面
2015/07/22 Python
django文档学习之applications使用详解
2018/01/29 Python
python PrettyTable模块的安装与简单应用
2019/01/11 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
几个Linux面试题笔试题
2012/12/01 面试题
机关单位人员学雷锋心得体会
2014/03/10 职场文书
教堂婚礼主持词
2014/03/14 职场文书
学生评语大全
2014/04/18 职场文书
增员口号大全
2014/06/18 职场文书
出国留学英文自荐信
2015/03/25 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书