EXTJS上传图片

最新推荐文章于 2018-01-22 09:54:42 发布

minsheng0825

最新推荐文章于 2018-01-22 09:54:42 发布

阅读量7.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： Ext JS JavaScript Java 文章标签： extjs exception path file date java

本文链接：https://blog.youkuaiyun.com/minsheng0825/article/details/7456866

JavaScript 同时被 3 个专栏收录

7 篇文章

订阅专栏

Ext JS

6 篇文章

订阅专栏

Java

4 篇文章

订阅专栏

本文介绍了一个基于Ext JS的图片上传组件实现，包括表单配置、文件上传功能以及图片处理后的展示逻辑。

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

// 图片上传form
		var upImgForm = new Ext.FormPanel( {
			layout : 'form',
			frame : true,
			border : false,
			autoScroll : true,
			bodyStyle : "margin: 5 5 5 5",
			height : 400,
			enctype: 'multipart/form-data',
			fileUpload : true,
			buttonAlign : 'center',
			labelWidth : 50,
			items : [ {
				layout : 'column',
				items : [ 
				 {
					html : '<input id="resetupImg" type=reset style="display:none;">',
					border : false
				},fileText, {
					xtype : 'button',
					iconCls : 'icon-nav',
					text : ' 上传图片  ',
					handler : function() {
						var item_code = text_item_code.getValue();
						if(item_code){
							if (upImgForm.getForm().isValid()) {
								//btn.disable();
								upImgForm.getForm().submit( {
									url : '../../jsp/item/imgMgrRst1.jsp?file_text='+fileText.getValue()
									+"&item_code="+text_item_code.getValue()+"&i="+i
									+'&waterMark='+upImgForm.form.findField("waterMark").getGroupValue(),
									waitTitle : '请稍候',
									waitMsg : '正在上传图片,请稍候...',
									success : function(form,action) {
										if (action.result.img1 != null)
											img1.getEl().dom.src = action.result.img1;
										else
											img1.getEl().dom.src = '../../item_images/imageL.jpg';
										if (action.result.img2 != null)
											img2.getEl().dom.src = action.result.img2;
										else
											img2.getEl().dom.src = '../../item_images/imageM.jpg';
										if (action.result.img3 != null)
											img3.getEl().dom.src = action.result.img3;
										else
											img3.getEl().dom.src = '../../item_images/imageS.jpg';
										if (action.result.img4 != null)
											img4.getEl().dom.src = action.result.img4;
										else
											img4.getEl().dom.src = '../../item_images/imageA.jpg';
										if (action.result.img5 != null)
											img5.getEl().dom.src = action.result.img5;
										else
											img5.getEl().dom.src = '../../item_images/imageP.jpg';
										if (action.result.img6 != null)
											img6.getEl().dom.src = action.result.img6;
										else
											img6.getEl().dom.src = '../../item_images/imageP.jpg';
									},
									failure : function(form, action) {
										Ext.Msg.show( {
											title : '提示',
											msg : '上传图片不能大于500KB！',
											buttons : Ext.Msg.OK
										});
									}
								})
							}
						}else{
							Ext.Msg.show( {
								title : '提示',
								msg : '商品编号不能为空！',
								buttons : Ext.Msg.OK
							});
						}
					}
				} ]

JS代码中的FormPanel中设置属性

enctype: 'multipart/form-data',
fileUpload : true,

java代码使用Smart

SmartUpload smartUpload = new SmartUpload();
	smartUpload.initialize(pageContext);
	smartUpload.upload();
	Files files = smartUpload.getFiles();
	int filecount = files.getCount();
	Date d = new Date();
	StringBuffer jsonString = new StringBuffer();
	for (int a = 0; a < filecount; a++) {
		com.jspsmart.upload.File f = files.getFile(a);//获取上传的文件
		Log.dbg.println("===>submit File:" + f.getFileName()+ "=========" + f.getSize());
		if (f.getSize() <= 500000) {
			try {
				//imagePath = file_path3 + item_code + ".jpg";//当前图片的存放路径
				imagePath=file_path3+item_code+".jpg";//当前图片的存放路径
				Log.dbg.println("===>to save path:" + imagePath);
				f.saveAs(imagePath,com.jspsmart.upload.File.SAVEAS_PHYSICAL);
				jsonString.append("{success:true");
			} catch (Exception e) {
				e.printStackTrace();
			}
		} else {
			jsonString.append("{failure:true");
		}
	}