Ext.ux.UploadDialog上传文件成功后显示“上传失败”及中文文件名乱码问题
从网上找来Ext.ux.UploadDialog上传文件的例子，但是上传文件后页面显示“上传失败”，而且上传中文文件会出现文件名乱码的现象。请各位大侠帮忙解决一下。谢谢了。
- HTML code
<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" /><link rel="stylesheet" type="text/css" href="UploadDialog/css/Ext.ux.UploadDialog.css" /> <script type="text/javascript" src="ext-2.2/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-2.2/ext-all.js"></script <script type="text/javascript" src="UploadDialog/Ext.ux.UploadDialog.packed.js"></script><script>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, title: "文件上传", url: 'uploadJSPBack.jsp', reset_on_hide: false, allow_close_on_upload: true }); dialog.show('show-button');});</script></head><body></body></html>uploadJSPBack.jsp
- HTML code
<%@ page language="java" import="java.util.*,java.io.*,org.apache.commons.fileupload.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>My JSP 'uploadJSPBack.jsp' starting page</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <%response.setCharacterEncoding("utf-8");String uploadPath = "d:\\upload\\";String tempPath = "d:\\";try { System.out.println("开始进行文件上传"); DiskFileUpload fu = new DiskFileUpload(); fu.setSizeMax(4194304); // 设置最大文件尺寸，这里是4MB fu.setSizeThreshold(4096); // 设置缓冲区大小，这里是4kb fu.setRepositoryPath(tempPath); // 设置临时目录 List fileItems = fu.parseRequest(request); // 得到所有的文件： Iterator i = fileItems.iterator(); // 依次处理每一个文件： while (i.hasNext()) { FileItem fi = (FileItem)i.next(); String fileName = fi.getName();// 获得文件名，这个文件名包括路径： System.out.println("name==="+fileName); if (fileName != null) { // 在这里可以记录用户和文件信息 // 此处可以定义一个接口（CallBack），用于处理后事。 // 写入文件a.txt，你也可以从fileName中提取文件名： String name = fileName.substring(0,fileName.indexOf(".")); System.out.println("name==="+name); String extfile = fileName.substring(fileName.indexOf(".")); //上传时间作为文件名，用以防止重复上传 //Timestamp now = new Timestamp((new java.util.Date()).getTime()); // SimpleDateFormat fmt = new SimpleDateFormat("yyyyMMddHHmmssSSS"); // String pfileName= fmt.format(now).toString().trim(); System.out.println(uploadPath+name+extfile); fi.write(new File(uploadPath + name + extfile)); } } System.out.println("上传成功"); response.setContentType("text/html;charset=utf-8"); response.getWriter().print("{success:true,message:'上传成功'}"); // 跳转到上传成功提示页面 } catch (Exception e) { e.printStackTrace(); response.getWriter().print("{success:flase,message:'False'}"); // 可以跳转出错页面 } %> </head> <body> This is my JSP page. <br> </body></html>
[解决办法]
楼主，我的上传已经做好了，找出你的几个 bug 了：
1. 中文问题，确实将 UTF-8 改成 GBK 就可以传入中文的文件名
2. fi.write(new File(name + extfile)); 去掉 uploadPath ,不然会找不到文件的。
3. 你之所以上传成功了，但是还是返回上传错误，就是你的 JSON 返回值有问题。你把
<body>
This is my JSP page. <br> // 这行也算在 JSON 返回值里了，你把这行代码去掉就可以了，我也是刚刚才发现这个问题的
</body>
现贡献我的代码：
- HTML code
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <link rel="stylesheet" type="text/css" href="ext2.2/resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="ext2.2/examples/shared/examples.css" /> <link rel="stylesheet" type="text/css" href="upload/css/Ext.ux.UploadDialog.css" /> <script type="text/javascript" src="ext2.2/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext2.2/ext-all-debug.js"></script> <script type="text/javascript" src="upload/Ext.ux.UploadDialog.packed.js"></script> <script type="text/javascript" src="upload/Ext.ux.UploadDialog.js"></script> </head> <script type="text/javascript">Ext.onReady(function() { var dialog = new Ext.ux.UploadDialog.Dialog({ title: '文件上传__上传过程中关闭窗口，不影响上传_wayfoon', url:'uploadJSPBack.jsp', width : 450, height : 300, minWidth : 450, minHeight : 300, draggable : true, resizable : true, //autoCreate: true, constraintoviewport: true, permitted_extensions:['JPG','jpg','jpeg','JPEG','GIF','gif','bmp','BMP'], modal: true, //post_var_name: 'mms', reset_on_hide: false, allow_close_on_upload: true //关闭上传窗口是否仍然上传文件 // upload_autostart: false //是否自动上传文件 }); dialog.show();//'show-button' dialog.on('uploadsuccess', onUploadSuccess); // 上传成功后的回调成功的函数 function onUploadSuccess(dialog, filename, resp_data, record) { // alert(resp_data); }}); </script> <body> </body></html>