您的位置：首页 > Web前端 > JavaScript

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

2012-08-21 17:23 465 查看

相关包文件：

commons-fileupload-1.2.1.jar

commons-io-1.4.jar

前端程序：

Html代码

<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代码：

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);

%>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航