EXTJS上传图片预览（版本3.2）_extjs3实现在线图片下载预览servlet-优快云博客

本文链接：https://blog.youkuaiyun.com/xia_liangfeng/article/details/14002355

本文详细介绍了如何在网页中实现图片的上传、预览功能，包括使用ExtJS框架创建表单面板，设置图片预览区域及上传按钮，以及图片预览逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

		var myFormUpload = new Ext.form.FormPanel({  
		    baseCls: 'x-plain',  
		    labelWidth: 80,   	  
		    fileUpload:true,   
		    defaultType: 'textfield',	  
		    items: [{
		    		xtype : 'box',//  图片框
				    id : 'logPic',
				    border :'10 5 3 10',
				    fieldLabel : "预览照片",  
				    width : 200,  
				    height : 160,
				    autoShow:true,
				    autoEl : {  
				        tag : 'img',
				        src: '../downloads/zanwu.jpg',
				        //下面这句不能删，删除后，图片预览在IE里无效			        
				       style:'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);'
				    	}
				    },{
				    xtype : 'textfield',  //文件框
				    id : 'logoFile',  
				    //name : 'logoFile',
				    regex : /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/,  
				    inputType : 'file',  
				    fieldLabel : '上传图片',  
				    width : 280,
				     listeners : {  
				          'render':function(){  
				            var logoFileCmp = Ext.get('logoFile');  
				            logoFileCmp.on('change',function(field,newValue,oldValue){//图片预览  
				                     var url = 'file:///' + logoFileCmp.getValue();//得到选择的图片路径  
				                      //是否是规定的图片类型 
				                     var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/;
				            if (img_reg.test(url)) {
				                     if(Ext.isIE){  
				                     var image = Ext.get('logPic').dom;
				                          image.src = Ext.BLANK_IMAGE_URL;  //覆盖原来的图片
				                          //image.src=window.URL.createObjectURL(logoFileCmp.dom.files.item(0));
				                          image.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = url;
				                        }else{  
				                          //支持FF 
				                          image.src=window.URL.createObjectURL(logoFileCmp.dom.files.item(0));
				                             }
				               }else{
				                      Ext.Msg.alert('提示','请选择图片类型的文件！');
	                                  return ;
				                     }  
				                },this);  
				             }}}]});   
				var fmWindow = new Ext.Window({
							  modal:true,
				              title:"图片上传",
				              width:400,
				              closable:false,
				              height:300,
				              minWidth:300,
				              minHeight:100,
				              layout:"fit",
				              plain:true,
				              bodyStyle:"padding:5px;",
				              buttonAlign:"center",
				              imageLock:false,	              
				              items: [myFormUpload],			      
				              buttons:[{
				                 text:"上传",
				                 handler:function () {
								if (myFormUpload.form.isValid()) {
								      myFormUpload.getForm().submit({
								     	 url : './uploadRecFileImg.action',
													params : {
														fileaddr : _fileaddr,
														serverip:_serverip
													},
													method : 'POST',
								       success:function (form, action) {
								if (action.result.msg == '上传成功') {
									Ext.Msg.alert("提示", "上传成功！设为封面成功");
									ds_imgfile_view.reload(); 
									fmWindow.close();
									}else if(action.result.msg == '上传失败') {
									Ext.Msg.alert("提示", "上传失败");
									ds_imgfile_view.reload(); 
									}
									fmWindow.close();
								}, failure:function (form, action) {       
									Ext.Msg.alert("Error", action.result.msg);
								}});
							}
						}},{
						text:"取消", handler:function(){
							 fmWindow.close();
							}}],
								listeners : {
									beforeclose : function() {
										// 关闭前销毁
										fmWindow.destroy();
									}
								}
							}).show();