应用Ext.ux.UploadDialog上传文件
要弄一个上传文件的东西，真是困难啊——对我来说。从网上找了很多资料，最后选择了比较成熟的组件进行传递。前台用Ext.ux.UploadDialog组件，后台用cos组件。由于对EXT不熟悉，中间遇到了很多困难，所幸在网上有人帮助——谢谢Ghost_520，最终得以完成。
总结一下：
1.中文文件名乱码的问题：前台jsp页面与后台jsp页面都要统一编码，尤其是需要添加
contentType="text/html; charset=utf-8" pageEncoding="utf-8"
语句，无论是utf-8或是gbk。
2.后台返回到前台的状态语句是
response.getWriter().print("{success:true,message:'上传成功'}");
在UploadDialog组件中解析responseText，并最终生成JSON格式，不过在后台Jsp页面的<body></body>直接不能有语句，否则UploadDialog组件会连同body直接的语句一起解析，则无法得到正确的值。
这是最终的代码
前台JSP
view plaincopy to clipboardprint?
<html>
<head>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上传页面</title>
<link rel="stylesheet" type="text/css" href="ext-2.2/resources/css/ext-all.css" mce_href="ext-2.2/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="UploadDialog/css/Ext.ux.UploadDialog.css" mce_href="UploadDialog/css/Ext.ux.UploadDialog.css" />
<mce:script type="text/javascript" src="ext-2.2/adapter/ext/ext-base.js" mce_src="ext-2.2/adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="ext-2.2/ext-all.js" mce_src="ext-2.2/ext-all.js"></mce:script>
<mce:script type="text/javascript" src="UploadDialog/Ext.ux.UploadDialog.packed.js" mce_src="UploadDialog/Ext.ux.UploadDialog.packed.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function() {
var dialog = new Ext.ux.UploadDialog.Dialog({
autoCreate: true,
closable: true,
collapsible: false,
draggable: true,
minWidth: 400,
minHeight: 200,
width: 400,
height: 350,
permitted_extensions:['JPG','jpg','jpeg','JPEG','GIF','gif','pdf','txt','jar'],
proxyDrag: true,
resizable: true,
constraintoviewport: true,
url: 'upLoad.jsp',
reset_on_hide: false,
allow_close_on_upload: true
});
dialog.show('show-button');
});
// --></mce:script>
</head>
<body>
</body>
</html>
<html>
<head>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上传页面</title>
<link rel="stylesheet" type="text/css" href="ext-2.2/resources/css/ext-all.css" mce_href="ext-2.2/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="UploadDialog/css/Ext.ux.UploadDialog.css" mce_href="UploadDialog/css/Ext.ux.UploadDialog.css" />
<mce:script type="text/javascript" src="ext-2.2/adapter/ext/ext-base.js" mce_src="ext-2.2/adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="ext-2.2/ext-all.js" mce_src="ext-2.2/ext-all.js"></mce:script>
<mce:script type="text/javascript" src="UploadDialog/Ext.ux.UploadDialog.packed.js" mce_src="UploadDialog/Ext.ux.UploadDialog.packed.js"></mce:script>
<mce:script type="text/javascript"><!--
Ext.onReady(function() {
var dialog = new Ext.ux.UploadDialog.Dialog({
autoCreate: true,
closable: true,
collapsible: false,
draggable: true,
minWidth: 400,
minHeight: 200,
width: 400,
height: 350,
permitted_extensions:['JPG','jpg','jpeg','JPEG','GIF','gif','pdf','txt','jar'],
proxyDrag: true,
resizable: true,
constraintoviewport: true,
url: 'upLoad.jsp',
reset_on_hide: false,
allow_close_on_upload: true
});
dialog.show('show-button');
});
// --></mce:script>
</head>
<body>
</body>
</html>
后台JSP
view plaincopy to clipboardprint?
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page import="java.io.*" %>
<%@ page import="com.oreilly.servlet.*" %>
<%@ page import="com.oreilly.servlet.multipart.*" %>
<%@ page contentType="text/html;charset=utf-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>上传后台页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<%
//文件上传后,保存在D://upload
String saveDirectory = "D://upload";
//每个文件最大5m,最多3个,所以总文件大小为(以字节为单位)
int maxPostSize = 3*5*1024*1024;
//保存文件 response的编码为utf-8,
MultipartRequest multi = new MultipartRequest(request,saveDirectory,maxPostSize,"utf-8");
//输出反馈信息
Enumeration files = multi.getFileNames();
while(files.hasMoreElements()){
String name = (String)files.nextElement();
File f = multi.getFile(name);
// if(f!=null){
// String fileName = multi.getFilesystemName(name); 获得文件名
// String lastFileName = saveDirectory+"//"+fileName; 显示保存路径
// out.println("上传的文件:"+lastFileName);
// out.println("<hr>");
// }
}
System.out.println("上传成功");
response.setContentType("text/html;charset=utf-8");
response.getWriter().print("{success:true,message:'上传成功'}");
%>
</head>
<body>
</body>
</html>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page import="java.io.*" %>
<%@ page import="com.oreilly.servlet.*" %>
<%@ page import="com.oreilly.servlet.multipart.*" %>
<%@ page contentType="text/html;charset=utf-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>上传后台页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<%
//文件上传后,保存在D://upload
String saveDirectory = "D://upload";
//每个文件最大5m,最多3个,所以总文件大小为(以字节为单位)
int maxPostSize = 3*5*1024*1024;
//保存文件 response的编码为utf-8,
MultipartRequest multi = new MultipartRequest(request,saveDirectory,maxPostSize,"utf-8");
//输出反馈信息
Enumeration files = multi.getFileNames();
while(files.hasMoreElements()){
String name = (String)files.nextElement();
File f = multi.getFile(name);
// if(f!=null){
// String fileName = multi.getFilesystemName(name); 获得文件名
// String lastFileName = saveDirectory+"//"+fileName; 显示保存路径
// out.println("上传的文件:"+lastFileName);
// out.println("<hr>");
// }
}
System.out.println("上传成功");
response.setContentType("text/html;charset=utf-8");
response.getWriter().print("{success:true,message:'上传成功'}");
%>
</head>
<body>
</body>
</html>
最终结果如图
var dialog = new Ext.ux.UploadDialog.Dialog({
autoCreate: true, //自动会创建要渲染的元素
closable: false, //可以关闭
collapsible: true,//可以收缩
draggable: true,//可以拖拽
minWidth: 400, //最小宽度
minHeight: 200,//最小高度
width: 400, //宽度
height: 350,//高度
proxyDrag: true, //拖拽时会请求一个代理
resizable: true, //窗体可以改变大小
constraintoviewport: true, //窗体在viewport中可见
title: 'File upload queue.', //标题
url: 'upload.asp', //上传的url
reset_on_hide: false, //重置后隐藏
post_var_name: 'extfile',//提供后台获取的名称
allow_close_on_upload: false //是否允许上传中关闭
});
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/xiaoyao6650/archive/2009/03/14/3987865.aspx