Posted in Javascript onMarch 22, 2012
{ 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; } }
解决Extjs上传图片无法预览的解决方法
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@