Ext图片上传之预览 .

Myth丶恋晨 2022-06-18 05:48 383阅读 0赞

在进行图片上传时，通常需要进行预览。而这种预览的行为通常是预览客户端的本地资源。下面就讲一下在Ext中是如何实现图片上传预览的。

首先，创建为预览图片创建一个控件：

xtype : 'box',  
id : 'logoPic',  
width : 150,  
height : 200,  
autoEl : \{  
tag : 'img',  
src : currentLogoPath,  
style : 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);'  
\}

然后再创建一个图片上传的控件：

xtype : 'textfield',  
id : 'logoFile',  
name : 'logoFile',  
inputType : 'file',  
fieldLabel : ' 商社标志文件',  
width : 280,  
listeners : \{  
'render':function()\{  
var logoFileCmp = Ext.get('logoFile');  
logoFileCmp.on('change',function(field,newValue,oldValue)\{  
var picPath = logoFileCmp.getValue();  
var url = 'file:///' + picPath;  
if(Ext.isIE)\{  
var image = Ext.get('logoPic').dom;  
image.src = Ext.BLANK\_IMAGE\_URL;  
image.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = url;  
\}else\{  
//支持FF  
Ext.get('logoPic').dom.src =Ext.get('logoFile').dom.files.item(0).getAsDataURL();  
\}  
\},this);  
\}  
\}

为文件上传控件添加一个change事件。注意，在这里一定要用Ext.get方法取得控件，否则change事件会无效的。当有图片上传时，控件的值会发生改变，然后修改预览控件的src的值，以实现图片预览。

发表评论取消回复

表情：

评论列表（有 0 条评论，383人围观）

还没有评论，来说两句吧...

相关阅读

相关上传图片实现预览

![Image 1][]浏览器必须支持FileReader,先判断是否支持。监听type属性等于file的input的change（值改变）事件。使用F

Bertha 。/ 2023年10月16日 22:41/ 0 赞/ 48 阅读

相关 JavaScript上传图片前预览

纯JavaScript上传图片前预览 <table width="100%" border="0" cellspacing="0" cellpadding="0">

女爷i/ 2022年08月21日 05:59/ 0 赞/ 367 阅读

相关 Ext图片上传之预览 .

在进行图片上传时，通常需要进行预览。而这种预览的行为通常是预览客户端的本地资源。下面就讲一下在Ext中是如何实现图片上传预览的。首先，创建为预览图片创建一个控件： xty

Myth丶恋晨/ 2022年06月18日 05:48/ 0 赞/ 384 阅读

相关 jquery 实现图片上传预览

jquery 实现图片上传预览 1.如下代码就能实现： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti

蔚落/ 2022年06月05日 01:57/ 0 赞/ 511 阅读

相关 js上传图片预览

function imgFile(file){ file.change(function(){ var current_img=this.file

本是古典何须时尚/ 2022年05月22日 03:34/ 0 赞/ 495 阅读

相关 Vue图片上传预览

Vue图片上传预览想要的效果 ![zUO9bbB.png][] 代码实现页面核心代码 <h3

骑猪看日落/ 2022年05月08日 09:24/ 0 赞/ 573 阅读

相关图片预览与上传

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

小鱼儿/ 2022年04月24日 10:50/ 0 赞/ 627 阅读

相关一个图片上传预览

一、一个按钮上传文件操作前台选择文件，只能通过input的file类型的文件选择框操作。但有时却为了界面的美观，要求用按钮来完成。第一步、隐藏文件选择框第二步、

╰半橙微兮°/ 2022年04月08日 11:56/ 0 赞/ 645 阅读

相关上传图片并预览

HTML： <input accept="image/" name=" fileImage" type="file" onchange="upload"> <

Myth丶恋晨/ 2021年11月23日 10:16/ 0 赞/ 809 阅读

相关 extjs上传图片预览

[EXTJS图片上传预览(含本地上传前预览和服务器图片预览)][EXTJS] 创建EXTJS组件 ![复制代码][copycode.gif] 1 //生成me

系统管理员/ 2021年09月10日 07:04/ 0 赞/ 843 阅读