`
yiminghe
  • 浏览: 1466526 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

ie 6, 7 预览本地图片 附 Ext window

阅读更多

 

引入css

 

		#form-file_div
{
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}

#form-file2_div
{
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}

 

创建 formpnel

 

 if (Ext.isIE) {
            fileConfig = {
                xtype:'field',
                inputType:'file',
                fieldLabel: '上传文件',
                name: 'file1',
                id: 'form-file',
                anchor:'95%'

            };
        }

        var eform = new Ext.FormPanel({
            labelAlign: 'left',
            frame:true,
            fileUpload: true,
            //title: '编辑Bug  ; ' + bugName_str,
            animCollapse:true,
            labelWidth:70,
            width: 560,
            method:'POST',
            defaults: {
                anchor: '95%',
								width:550,
                msgTarget: 'side'
            },
            items: [window.bugId,window.bugTitle, window.user,
                {
                    xtype: 'textfield',
                    fieldLabel: '文件名称'  ,
                    id:'filetitle1',
                    anchor:'95%',
                    name:'title1'
                },fileConfig,
                {
                	xtype:'panel',
                	html:'<div id="form-file_div" ext:qtip="TODO"></div><br><br>',
                	title:'图片预览',
                	collapsible:true,
                	hidden:true,
                	id:'form-file_panel'
                	
                },
                window.fullInfo],

            buttons: [{
                text: '确定' ,
                handler:function() {
                    if (eform.form.isValid()) {
                        var originalV = window.fullInfo.getValue();
                        var originalT = window.bugTitle.getValue();
                        var originalTfT = Ext.getCmp('filetitle1').getValue();
                        Ext.getCmp('filetitle1').setValue(encodeURIComponent(originalTfT));
                        window.fullInfo.setValue(encodeURIComponent(window.fullInfo.getValue()));
                        window.bugTitle.setValue(encodeURIComponent(window.bugTitle.getValue()));

                        eform.form.submit({
                            url : 'BtsSetBugDO_ext.jsp',
                            success : function(form, action) {
                                //Ext.Msg.alert('成功', '修改成功!');
                                window.grid.reload();
                                if (window.grid2 && window.w_bug.isVisible()) {
                                	
                                	window.grid2.reload();
                                
                                }
                            },
                            failure : function(form, action) {
                                window.fullInfo.setValue(originalV);
                                window.bugTitle.bugTitle(originalT);
                                Ext.getCmp('filetitle1').setValue(originalTfT);
                                Ext.Msg.alert('失败', action.result.data.info);
                            },
                            waitMsg : '正在保存数据,稍后...'
                        });
                        window.edit_bug.hide();
                    } else {
                        // Ext.Msg.alert('信息', '请填写完成再提交!');
                    }


                }
            },{
                text:'清除文件',
                handler:function() {
                    clearFile('form-file', 'filetitle1', 'file1');
                    Ext.getCmp('form-file_panel').hide();

                }
            }]
        });


        window.edit_bug = new Ext.Window(
        {
            width: 600,
            frame: true,
            //layout:'fit',
            //autoHeight:true,
            height: 400,
            autoScroll:true,
            title: '编辑Bug  : ' + bugName_str,
            closeAction: 'hide',

            //modal: true ,
            renderTo: document.body  ,
            items:[ eform
            ]

        });
        if (Ext.isIE) {
            Ext.getCmp('form-file').getEl().dom.onchange = function() {
                onchangeFile1(Ext.getCmp('form-file').getEl().dom, 'filetitle1');
                preview(Ext.getCmp('form-file').getEl().dom,'form-file');
            }
        }

 

 

主要的辅助函数:

 

function preview(o,name){
	//var obj =  o;
	Ext.getCmp(name+"_panel").body.hide();
	var newPreview = document.getElementById(name+"_div");
	newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = o.value;
	newPreview.style.width = "400px";
    newPreview.style.height = "300px";
	Ext.getCmp(name+"_panel").show();
	Ext.getCmp(name+"_panel").body.slideIn('l', {stopFx:true,duration:.2});
}
function onchangeFile1(o, title) {
    var obj = o || this;

    // alert(obj.value);
    Ext.getCmp(title).setValue(getFileName(obj.value));
}
function clearFile(fileId, title, name) {
    if (Ext.isIE) {
        document.getElementById('x-form-el-' + fileId).innerHTML = '<input type="file" name="' + name + '" ' +
                                                                   'id="' + fileId + '"' +
                                                                   ' autocomplete="off" ' +
                                                                   'size="20" class="x-form-file x-form-field" ' +
                                                                   'style="width: 470px;" ' +
                                                                   'onchange=\"onchangeFile1(this,\'' + title + '\');preview(this,\''+fileId+'\');\"/>';


        document.getElementById(fileId).value = '';
        document.getElementById(title).value = '';
    } else {
        Ext.getCmp(fileId).reset();
    }

}

 

 

这样就完成了  ,图片预览 ,清理图片 等 js form 基本功能 ,当然 firefox 不能预览。。。。

 

注意 :window 的 layout :'fit' 不能和 autoScroll 一起用 ,用了 fit ,window 就不能 加载图片后 自动出现

滚动条了!!!

 

 

 

  • 描述: 效果图2
  • 大小: 230.9 KB
  • 描述: 效果图1
  • 大小: 13.5 KB
分享到:
评论

相关推荐

    一个简单的Ext.Window中插入图片的例子

    本文将详细介绍如何在`Ext.Window`中插入图片,帮助你更好地理解和应用这一功能。 首先,理解`Ext.Window`的基本结构是关键。它是一个轻量级的弹出窗口组件,可以设置大小、位置、标题、工具栏、内容区域等属性。在...

    Ext window的使用

    Ext.Window是Ext JS中的一个类,继承自Ext.container.Container,它创建了一个可以在页面上自由移动和调整大小的浮动窗口。窗口通常用作模态对话框、信息提示或其他需要用户交互的场景。 2. **创建一个基本的Ext....

    ext图片上传前预览小demo

    7. **样式调整**:预览图片的大小可能与实际显示的大小不匹配,EXT允许我们通过样式属性来调整Image组件的尺寸,以适应不同的应用场景。 8. **兼容性考虑**:虽然HTML5的File API提供了强大的功能,但并非所有...

    Ext_Window用法

    Ext_Window用法

    ext 仿window 界面

    "ext 仿window 界面"指的是使用EXTJS 框架来创建类似于Windows桌面操作系统的用户界面,提供一种熟悉且直观的交互体验。这种设计方式可以使Web应用在视觉上更接近本地应用,提高用户的使用舒适度。 EXTJS 提供了...

    EXT 上传图片 删除图片,显示图片,PHP

    在EXT中,处理图片上传、删除和显示是一项常见的任务,特别是在构建涉及多媒体内容的Web应用时。本篇文章将深入探讨EXT如何与PHP配合,实现这些功能。 1. **图片上传** 在EXT中,我们可以使用`Ext.form.FileField`...

    Ext.window从右下角弹出/隐藏

    ### Ext.window从右下角弹出/隐藏:深入解析与实现 #### 一、概述 在Web应用开发中,为了提升用户体验,开发者经常会利用各种UI框架来实现丰富的交互效果。ExtJS作为一款成熟且功能强大的JavaScript框架,在这方面...

    Ext-window属性

    【Ext.Window属性详解】 在Ext JS中,`Ext.Panel`是一个强大的组件,它可以用来创建各种复杂的用户界面。当Panel被用作窗口时,它通常会继承或包含`Ext.window.Window`的一些属性。以下是对`Ext.Panel` API中与`...

    EXT Window 通过DIV布局(源代码)

    Ext.Window 通过DIV布局,通过DIV填充window内容,带Ext所需文件。

    EXTJS 强大的图片查看器 仿windows照片查看器

    7. **图片处理**:在图片查看器中,可能涉及到图片的加载、预加载策略、缩放算法、以及优化性能等方面的技术。例如,大图的懒加载可以提高页面加载速度。 8. **响应式设计**:考虑到不同设备和屏幕尺寸,图片查看器...

    4.0Ext 本地化

    《4.0Ext 本地化:打造符合用户文化的交互体验》 在当今全球化的时代,软件应用不仅要功能强大,还要能够适应不同地区的语言和文化习惯。4.0Ext 提供了强大的本地化功能,帮助开发者为用户提供更加贴心的界面体验。...

    extjs中本地照片预览、blob数据在oracle中存取

    此压缩包中完全能实现的功能是在extjs中让本地照片预览,并且将地址传递给java后台,将图片文件以blob的形式存储到oracle数据库,并且可以默认将数据库中的数据第一次加载在预览框里(也就是从数据库中读出blob数据...

    EXT2.0在本地浏览API的插件

    通过EXT2.0的本地浏览API插件,开发者可以实现一系列本地文件操作,如预览文本文件、读取图片、播放音频视频等。这为EXT2.0应用程序提供了更强大的本地交互能力,使得它们不再仅仅局限于网络,而是能够更好地融入...

    Ext相册实现文件拖拽,实时上传进度,本地预览

    2. **EXT4的Image组件**:对于图片文件,我们可以利用EXT4的Image组件,设置其`src`属性为数据URL,达到本地预览的效果。 **Servlet/Struts2处理** 在服务器端,我们可以使用Servlet或Struts2框架接收上传的文件。...

    ext超酷的grid中放图片(ext3.2.1)

    标题"ext超酷的grid中放图片(ext3.2.1)"暗示了我们将探讨如何在EXT JS的Grid组件中嵌入和展示图片。EXT JS 3.2.1虽然已经是较旧的版本,但其核心概念和方法在后续版本中仍然适用,因此学习这部分内容对于理解EXT JS...

    Ext.window的一个扩展组件SuperWin.js

    Ext.window的一个扩展组件SuperWin.js.可灵活自主随意定位,和显示模式;

    EXT 表格 本地分页的例子

    EXT 表格 本地分页的例子 EXT 表格 本地分页的例子

    EasyExt_003_第一个组件Ext.Window

    EasyExt_003_第一个组件Ext.Window EasyExt_003_第一个组件Ext.Window

    ext3与ie9不兼容的问题

    在探讨“ext3与ie9不兼容的问题”这一主题时,我们首先需要理解几个关键概念:ext3、Internet Explorer 9(简称IE9)以及它们之间的兼容性问题。此外,根据给定的部分内容,我们将深入分析JavaScript代码片段,了解...

    ext图片上传

    3. **预览功能**: 在用户选择文件后,可以利用File API在前端展示图片预览。 4. **自定义上传策略**: 你可以编写自定义的上传插件,根据业务需求实现特定的文件上传逻辑。 **总结** EXT图片上传功能利用`Ext.form....

Global site tag (gtag.js) - Google Analytics