`

ajax异步文件上传,servlet处理,含demo

 
阅读更多

附件是例子程序，欢迎下载。

 

用到两个jar包

commons-io-xx.jar

commons-fileupload-xx.jar

xx代表版本号

 

新建一个普通的java web工程

 

前端页面jsp代码:

[html] view plaincopy
 
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7. <title>Ajax File Uploader Plugin For Jquery</title>  
  8. <script type="text/javascript" src="jquery.js"></script>  
  9. <script type="text/javascript" src="ajaxfileupload.js"></script>  
  10. <script type="text/javascript">  
  11.     function ajaxFileUpload() {  
  12.         $("#loading").ajaxStart(function() {  
  13.             $(this).show();  
  14.         }).ajaxComplete(function() {  
  15.             $(this).hide();  
  16.         });  
  17.   
  18.         $.ajaxFileUpload({  
  19.             url : 'upload',// servlet请求路径  
  20.             secureuri : false,  
  21.             fileElementId : 'fileToUpload',// 上传控件的id  
  22.             dataType : 'json',  
  23.             data : {username : $("#username").val()}, // 其它请求参数  
  24.             success : function(data, status) {  
  25.                 if(data.msg) {  
  26.                     alert(data.msg);  
  27.                 }  
  28.             },  
  29.             error : function(data, status, e) {  
  30.                 alert('上传出错');  
  31.             }  
  32.         })  
  33.   
  34.         return false;  
  35.   
  36.     }  
  37. </script>  
  38. </head>  
  39.   
  40. <body>  
  41.     <h1>Ajax文件上传例子,JAVA版</h1>  
  42.     <img id="loading" src="loading.gif" style="display: none;">  
  43.     <form name="form" action="" method="POST" enctype="multipart/form-data">  
  44.         用户名:<input type="text" id="username" name="username"> <br>  
  45.         <input id="fileToUpload" type="file" size="45" name="fileToUpload"  
  46.             class="input">  
  47.         <button class="button" onclick="return ajaxFileUpload();">上传</button>  
  48.     </form>  
  49. </body>  
  50. </html>  


服务器端servlet核心代码:

[java] view plaincopy
 
  1. protected void doGet(HttpServletRequest request,  
  2.             HttpServletResponse response) throws ServletException, IOException {  
  3.         request.setCharacterEncoding("utf-8"); // 设置编码  
  4.         response.setCharacterEncoding("utf-8");  
  5.         response.setContentType("text/html;charset=UTF-8");  
  6.         // 获得磁盘文件条目工厂  
  7.         DiskFileItemFactory factory = new DiskFileItemFactory();  
  8.           
  9.         // 如果没以下两行设置的话，上传大的文件会占用很多内存，  
  10.         // 设置暂时存放的存储室 ,这个存储室,可以和最终存储文件的目录不同  
  11.         /** 
  12.          * 原理 它是先存到 暂时存储室，然后在真正写到 对应目录的硬盘上， 按理来说 当上传一个文件时，其实是上传了两份，第一个是以 .tmp 
  13.          * 格式的 然后再将其真正写到 对应目录的硬盘上 
  14.          */  
  15.         factory.setRepository(new File(TEMP_FOLDER));  
  16.         // 设置 缓存的大小，当上传文件的容量超过该缓存时，直接放到 暂时存储室  
  17.         factory.setSizeThreshold(1024 * 1024);  
  18.   
  19.         // 高水平的API文件上传处理  
  20.         ServletFileUpload upload = new ServletFileUpload(factory);  
  21.           
  22.         try {  
  23.             // 提交上来的信息都在这个list里面  
  24.             // 这意味着可以上传多个文件  
  25.             // 请自行组织代码  
  26.             List<FileItem> list = upload.parseRequest(request);  
  27.             // 获取上传的文件  
  28.             FileItem item = getUploadFileItem(list);  
  29.             // 获取文件名  
  30.             String filename = getUploadFileName(item);  
  31.   
  32.             System.out.println("存放目录:" + PATH_FOLDER);  
  33.             System.out.println("文件名:" + filename);  
  34.   
  35.             // 真正写到磁盘上  
  36.             item.write(new File(PATH_FOLDER, filename)); // 第三方提供的  
  37.                                 // 输出信息,前端页面获取,这里用的json格式             
  38.             PrintWriter writer = response.getWriter();  
  39.               
  40.             writer.print("{");  
  41.             writer.print("msg:\"文件大小:"+item.getSize()+",文件名:"+filename+"\"");  
  42.             writer.print("}");  
  43.               
  44.             writer.close();  
  45.           
  46.         } catch (FileUploadException e) {  
  47.             e.printStackTrace();  
  48.         } catch (Exception e) {  
  49.             e.printStackTrace();  
  50.         }  
  51.   
  52.     }  


别忘了web.xml配置servlet

[html] view plaincopy
 
  1. <servlet>  
  2.         <servlet-name>uploadProcessorServlet</servlet-name>  
  3.         <servlet-class>upload.UploadProcessorServlet</servlet-class>  
  4.     </servlet>  
  5.     <servlet-mapping>  
  6.         <servlet-name>uploadProcessorServlet</servlet-name>  
  7.         <url-pattern>/upload</url-pattern>  
  8.     </servlet-mapping>  
分享到：
| DateConverter does not support default S ...
评论
3 楼 ccwwdd 2016-05-16  
很好用。O(∩_∩)O谢谢分享！！！
2 楼 luanxiyuan 2015-12-01  
sunhao901001 写道
怎么获取其他参数啊，其他参数获取不到

你说的是回调function中没法获取参数吗？只要是writer.print数据符合json的格式，就能够得到。如果不懂json就自己上网了解一下吧
1 楼 sunhao901001 2015-11-27  
怎么获取其他参数啊，其他参数获取不到
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics