ie 6, 7 预览本地图片 附 Ext window
http://www.agoit.com/upload/attachment/41288/c7a61ef5-3679-38dd-8d6a-a60755a077b3.png引入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: , 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 就不能 加载图片后 自动出现
滚动条了！！！
页:
[1]