• 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. }  
  • 相关阅读:
    理解Linux 的CPU Load和CPU利用率
    Linux进程和信号超详细分析
    Linux 磁盘配额
    linux磁盘阵列raid详解
    Linux LVM管理
    Linux fstab文件详解
    Linux 磁盘管理
    sourceTree的使用
    Logstash 参考指南（Kafka输入插件）
    ELK的一次吞吐量优化
  • 原文地址：https://www.cnblogs.com/wwwroot/p/2723851.html
Copyright © 2020-2023  润新知