复制代码 代码如下: { 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' ); 复制代码 代码如下: var preview = function (myform, control_id) { var img_reg = /.([jJ][pP][gG]){1}$|.([jJ][pP][eE][gG]){1}$|.([gG][iI][fF]){1}$|.([pP][nN][gG]){1}$|.([bB][mM][pP]){1}$/ myform.on('render', function (f) { myform.form.findField(control_id).on('render', function () { Ext.get(control_id).on('change', function (field, newValue, oldValue) { var obj = Ext.get(control_id).dom; var url = getFullPath(obj); if (img_reg.test(url)) { var newPreview = Ext.get('browser_' + control_id).dom; var showPic = Ext.get("showPic_" + control_id); if (showPic != null) { showPic.remove();//删除原来的图片 } var imgDiv = document.createElement("div"); imgDiv.id = "showPic_" + control_id; document.body.appendChild(imgDiv); imgDiv.style.width = "150px"; imgDiv.style.height = "150px"; imgDiv.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)"; imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = url; newPreview.appendChild(imgDiv); } }, this); }, this); }, this); } //得到图片地址 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; } }

　　推荐阅读

　　让人期待的2011年度最佳 jQuery 插件分享

jQuery的易扩展性吸引了来自全球的开发者来共同编写 jQuery 插件，jQuery 插件不仅能够增强网站的可用性，有效的改善用户体验，还可以大大减少开发时间。 Isotope Isotype 是一款非常优秀的 jQuery 插件，用于创建>>>详细阅读

本文标题：解决Extjs上传图片无法预览的解决方法

地址：http://www.17bianji.com/kaifa2/JS/23529.html

 1/2    1