我真不是程序员

站长百科www.software8.co

JQuery Uploadify 基于JSP的无刷新上传实例

项目需要实现一个无刷新批量文件上传功能，仔细研究了下，发现JQuery 提供的Uploadify插件十分不错，不过官方的实例是基于php的，下面我用jsp+servlet简单实现了这个功能，废话少说，先看效果图：

1、初始化页面：

2、选择多个文件（可一次多选）后：

 

3、点击开始上传（上传完就自动消失）

效果就是上面那样，页面不刷新。下面上代码：

1、首先先到官网下载最新的zip压缩包http://www.uploadify.com

2、项目结构：

3、关键代码：

index.jsp

 

[html] view plaincopy
  1. <%@ page language="java" contentType="text/html; charset=utf-8"%>  
  2. <%  
  3.     String path = request.getContextPath();  
  4.     String basePath = request.getScheme() + "://"  
  5.             + request.getServerName() + ":" + request.getServerPort()  
  6.             + path + "/";  
  7. %>  
  8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  9. <html>  
  10. <head>  
  11. <base href="<%=basePath%>">  
  12. <title>Upload</title>  
  13.   
  14. <!--装载文件-->  
  15. <link href="css/default.css" rel="stylesheet" type="text/css" />  
  16. <link href="css/uploadify.css" rel="stylesheet" type="text/css" />  
  17. <script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>  
  18. <script type="text/javascript" src="scripts/swfobject.js"></script>  
  19. <script type="text/javascript" src="scripts/jquery.uploadify.v2.1.4.min.js"></script>  
  20.   
  21. <!--ready事件-->  
  22. <script type="text/javascript">  
  23.     $(document).ready(function() {  
  24.         $("#uploadify").uploadify({  
  25.             'uploader' : 'scripts/uploadify.swf',  
  26.             'script' : 'servlet/Upload',//后台处理的请求  
  27.             'cancelImg' : 'images/cancel.png',  
  28.             'folder' : 'uploads',//您想将文件保存到的路径  
  29.             'queueID' : 'fileQueue',//与下面的id对应  
  30.             'queueSizeLimit' : 5,  
  31.             'fileDesc' : 'rar文件或zip文件',  
  32.             'fileExt' : '*.rar;*.zip', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc  
  33.             'auto' : false,  
  34.             'multi' : true,  
  35.             'simUploadLimit' : 2,  
  36.             'buttonText' : 'BROWSE'  
  37.         });  
  38.     });  
  39. </script>  
  40. </head>  
  41.   
  42. <body>  
  43.     <div id="fileQueue"></div>  
  44.     <input type="file" name="uploadify" id="uploadify" />  
  45.     <p>  
  46.         <a href="javascript:jQuery('#uploadify').uploadifyUpload()">开始上传</a>   
  47.         <a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消所有上传</a>  
  48.     </p>  
  49. </body>  
  50. </html>  

 

web.xml

 

[html] view plaincopy
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2.   
  3. <web-app version="2.4"  
  4.   
  5.     xmlns="http://java.sun.com/xml/ns/j2ee"  
  6.   
  7.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
  8.   
  9.     xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee  
  10.   
  11.     http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">   
  12.   
  13.   <servlet>  
  14.   
  15.     <servlet-name>upload</servlet-name>  
  16.   
  17.     <servlet-class>com.xzit.upload.Upload</servlet-class>  
  18.   
  19.   </servlet>  
  20.   
  21.   <servlet-mapping>  
  22.   
  23.     <servlet-name>upload</servlet-name>  
  24.   
  25.     <url-pattern>/servlet/Upload</url-pattern>  
  26.   
  27.   </servlet-mapping>  
  28.   
  29.   <welcome-file-list>  
  30.   
  31.     <welcome-file>index.jsp</welcome-file>  
  32.   
  33.   </welcome-file-list>  
  34.   
  35. </web-app>  


Upload.java

 

 

[java] view plaincopy
    1. package com.xzit.upload;  
    2.   
    3. import java.io.File;  
    4.   
    5. import java.io.IOException;  
    6.   
    7. import java.util.Iterator;  
    8.   
    9. import java.util.List;  
    10.   
    11. import java.util.UUID;  
    12.   
    13.    
    14.   
    15. import javax.servlet.ServletException;  
    16.   
    17. import javax.servlet.http.HttpServlet;  
    18.   
    19. import javax.servlet.http.HttpServletRequest;  
    20.   
    21. import javax.servlet.http.HttpServletResponse;  
    22.   
    23.    
    24.   
    25. import org.apache.commons.fileupload.FileItem;  
    26.   
    27. import org.apache.commons.fileupload.FileUploadException;  
    28.   
    29. import org.apache.commons.fileupload.disk.DiskFileItemFactory;  
    30.   
    31. import org.apache.commons.fileupload.servlet.ServletFileUpload;  
    32.   
    33.    
    34.   
    35. @SuppressWarnings("serial")  
    36.   
    37. public class Upload extends HttpServlet {  
    38.   
    39.     @SuppressWarnings("unchecked")  
    40.   
    41.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
    42.   
    43.             throws ServletException, IOException {  
    44.   
    45.         String savePath = this.getServletConfig().getServletContext()  
    46.   
    47.                 .getRealPath("");  
    48.   
    49.         savePath = savePath + "/uploads/";  
    50.   
    51.         File f1 = new File(savePath);  
    52.   
    53.         System.out.println(savePath);  
    54.   
    55.         if (!f1.exists()) {  
    56.   
    57.             f1.mkdirs();  
    58.   
    59.         }  
    60.   
    61.         DiskFileItemFactory fac = new DiskFileItemFactory();  
    62.   
    63.         ServletFileUpload upload = new ServletFileUpload(fac);  
    64.   
    65.         upload.setHeaderEncoding("utf-8");  
    66.   
    67.         List fileList = null;  
    68.   
    69.         try {  
    70.   
    71.             fileList = upload.parseRequest(request);  
    72.   
    73.         } catch (FileUploadException ex) {  
    74.   
    75.             return;  
    76.   
    77.         }  
    78.   
    79.         Iterator<FileItem> it = fileList.iterator();  
    80.   
    81.         String name = "";  
    82.   
    83.         String extName = "";  
    84.   
    85.         while (it.hasNext()) {  
    86.   
    87.             FileItem item = it.next();  
    88.   
    89.             if (!item.isFormField()) {  
    90.   
    91.                 name = item.getName();  
    92.   
    93.                 long size = item.getSize();  
    94.   
    95.                 String type = item.getContentType();  
    96.   
    97.                 System.out.println(size + " " + type);  
    98.   
    99.                 if (name == null || name.trim().equals("")) {  
    100.   
    101.                     continue;  
    102.   
    103.                 }  
    104.   
    105.                 //扩展名格式：   
    106.   
    107.                 if (name.lastIndexOf(".") >= 0) {  
    108.   
    109.                     extName = name.substring(name.lastIndexOf("."));  
    110.   
    111.                 }  
    112.   
    113.                 File file = null;  
    114.   
    115.                 do {  
    116.   
    117.                     //生成文件名：  
    118.   
    119.                     name = UUID.randomUUID().toString();  
    120.   
    121.                     file = new File(savePath + name + extName);  
    122.   
    123.                 } while (file.exists());  
    124.   
    125.                 File saveFile = new File(savePath + name + extName);  
    126.   
    127.                 try {  
    128.   
    129.                     item.write(saveFile);  
    130.   
    131.                 } catch (Exception e) {  
    132.   
    133.                     e.printStackTrace();  
    134.   
    135.                 }  
    136.   
    137.             }  
    138.   
    139.         }  
    140.   
    141.         response.getWriter().print(name + extName);  
    142.   
    143.     }  
    144.   
    145. }  

posted on 2012-10-15 10:10  我真不是程序员  阅读(515)  评论(0)  编辑  收藏  举报

导航