Extjs上传图片预览与解决无法预览

时间：2022-06-25 18:29:45 编辑：袖梨来源：一聚教程网

在进行图片上传时，通常需要进行预览。而这种预览的行为通常是预览客户端的本地资源。下面就讲一下在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的值，以实现图片预览。

Extjs解决上传图片预览

网上找了好多EXTJS上传图片预览的，但都不行，，，下面虽然IE8可以但肯定还存在其它浏览器的兼容性问题，待搁应付一下吧。。

代码如下

复制代码

{
               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' );

代码如下

复制代码

//得到图片地址
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;
    }
}

这样就解决了extjs上传图片无法正常预览的问题。

推荐专题

最新下载

热门教程

Extjs上传图片预览与解决无法预览

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程