应用Ext.ux.UploadDialog上传文件 -

yuanfen860913

浏览: 119795 次
性别:
来自: 深圳

最近访客更多访客>>

jveqi

aa283818932

wangyy

u012363178

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (136)

社区版块

存档分类

应用Ext.ux.UploadDialog上传文件

EXT CSS JavaScript JSP HTML

要弄一个上传文件的东西，真是困难啊——对我来说。从网上找了很多资料，最后选择了比较成熟的组件进行传递。前台用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"></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"></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>

最终结果如图

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 //是否允许上传中关闭
});