ExtJS4学习笔记四－－图片下传-JavaSript-爱易网页

ExtJS4学习笔记四－－图片下传

日期：2014-05-16　浏览次数：20481 次

ExtJS4学习笔记四－－图片上传
前端程序：

<HTML>
 <HEAD>
  <TITLE>Ext.form.field.File示例</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
	Ext.onReady(function(){
		Ext.QuickTips.init();
		var uploadForm = Ext.create('Ext.form.Panel',{
			title:'Ext.form.field.File示例',
			bodyStyle:'padding:5 5 5 5',//表单边距
			frame : true,
			height:100,
			width:300,
			renderTo :'form',
			defaults:{//统一设置表单字段默认属性
				labelSeparator :'：',//分隔符
				labelWidth : 50,//标签宽度
				width : 150,//字段宽度
				allowBlank : false,//是否允许为空
				labelAlign : 'left',//标签对齐方式
				msgTarget :'side'   //在字段的右边显示一个提示信息
			},
			items:[{
		        xtype: 'filefield',
		        name: 'photo',
		        fieldLabel: '照片',
		        anchor: '100%',
		        buttonText: '选择照片...'
		    }],
		    buttons: [{
		        text: '上传文件',
		        handler: function() {
		            var form = uploadForm.getForm();
		            if(form.isValid()){
		                form.submit({
		                    url: 'uploadServer.jsp',
		                    waitMsg: '正在上传照片文件请稍候...',
		                    success: function(fp, o) {
		                        Ext.Msg.alert('提示信息', '您的照片文件 "' + o.result.file + '"已经成功上传。');
		                    }
		                });
		            }
		        }
		    }]
		});
	});
  </script>
 </HEAD>
 <BODY STYLE="margin: 10px">
 	 <div id='form'></div>
 </BODY>
</HTML>

JSP代码：

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page import="org.apache.commons.fileupload.*"%>
<%@ page import="org.apache.commons.fileupload.FileItem"%>
<%
DiskFileUpload upload = new DiskFileUpload();
upload.setHeaderEncoding("utf8");
java.util.List items = upload.parseRequest(request);
java.util.ListIterator listIterator = items.listIterator();
String fileName = "";
while(listIterator.hasNext()){
	FileItem item = (FileItem)listIterator.next();
	if(!item.isFormField()){
		fileName = item.getName();
		fileName = fileName.substring(fileName.lastIndexOf("\\")+1);//从全路径中提取文件名
	}
}
String msg = "{success:true,file:'"+fileName+"'}";
response.getWriter().write(msg);
%>

相关包文件：
commons-fileupload-1.2.1.jar
commons-io-1.4.jar

1 楼小汤姆 2012-06-18

文件保存路径呢？

2 楼豆豆糖 2012-07-02

这段代码在IE8下和firefox下都能正确获得文件的全路径吗？

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

ExtJS4学习笔记四－－图片下传

相关资料更多>

推荐阅读更多>