应用Ext.ux.UploadDialog上传文件

最新推荐文章于 2018-04-25 15:38:20 发布

jin_minghua

最新推荐文章于 2018-04-25 15:38:20 发布

阅读量187

点赞数

CC 4.0 BY-SA版权

文章标签： EXT JSP json Servlet HTML

本文链接：https://blog.csdn.net/jin_minghua/article/details/83936809

本文介绍如何利用Ext.ux.UploadDialog组件及cos组件实现文件上传功能，解决了中文文件名乱码等问题，并提供了完整的前后端示例代码。

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

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