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

ExtJS文件上传与预览

最新推荐文章于 2022-08-20 19:36:27 发布

最新推荐文章于 2022-08-20 19:36:27 发布 · 133 阅读

文章标签：

#IE #EXT #Microsoft #Firefox #CSS

javascript 专栏收录该内容

127 篇文章

订阅专栏

本文介绍如何使用ExtJS实现文件上传功能，并在IE浏览器中实现文件预览效果，包括图片显示及清理图片等功能。

引入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 就不能加载图片后自动出现

滚动条了！！！