jquery插件 jsp+servlet+uploadify3.1 文件上传

网络上很多的例子虽然说是3.1版本的,但是调用方法都是老版本的,跑不起来,经过查看doc,下面的例子可以在tomcat中正常运行。

index.jsp

  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.           
  13.         <title>文件上传</title>  
  14.           
  15.      <link href=“css/uploadify.css” rel=“stylesheet” type=“text/css” />  
  16.      <script type=“text/javascript” src=“scripts/jquery-1.7.2.min.js”></script>  
  17.      <script type=“text/javascript” src=“scripts/jquery.uploadify-3.1.min.js”></script>  
  18.     <script type=“text/javascript”>  
  19.     (document).ready(function()&nbsp;{&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#uploadify").uploadify({&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'auto'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;false,&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'swf'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;'<span class="tag">&lt;</span><span>%=path%</span><span class="tag">&gt;</span><span>/scripts/uploadify.swf',&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'uploader'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;'<span class="tag">&lt;</span><span>%=path%</span><span class="tag">&gt;</span><span>/scripts/uploadify',//后台处理的请求&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'queueID'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;'fileQueue',//与下面的id对应&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'queueSizeLimit'&nbsp;:1,&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'fileTypeDesc'&nbsp;&nbsp;&nbsp;:&nbsp;'rar文件或zip文件',&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'fileTypeExts'&nbsp;&nbsp;&nbsp;:&nbsp;'*.rar;*.zip',&nbsp;//控制可上传文件的扩展名,启用本项时需同时声明fileDesc&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'multi'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;true,&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'buttonText'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;'上传'&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;});&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">script</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;/</span><span class="tag-name">head</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">body</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">div</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">"fileQueue"</span><span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">div</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">input</span><span>&nbsp;</span><span class="attribute">type</span><span>=</span><span class="attribute-value">"file"</span><span>&nbsp;</span><span class="attribute">name</span><span>=</span><span class="attribute-value">"uploadify"</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">"uploadify"</span><span>&nbsp;</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">p</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="tag">&lt;</span><span class="tag-name">a</span><span>&nbsp;</span><span class="attribute">href</span><span>=</span><span class="attribute-value">"javascript:(‘#uploadify’).uploadify(‘upload’)”>开始上传</a>   
  20.                 <a href=“javascript:$(‘#uploadify’).uplaodify(‘cancel’,’*’)”>取消上传</a>  
  21.             </p>  
  22.       </body>  
  23.     </html>  
<%@ page language="java" contentType="text/html; charset=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>
        <base href="<%=basePath%>">

        <title>文件上传</title>

     <link href="css/uploadify.css" rel="stylesheet" type="text/css" />
     <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
     <script type="text/javascript" src="scripts/jquery.uploadify-3.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
     $("#uploadify").uploadify({
                    'auto'           : false,
                    'swf'            : '<%=path%>/scripts/uploadify.swf',
                    'uploader'       : '<%=path%>/scripts/uploadify',//后台处理的请求
                    'queueID'        : 'fileQueue',//与下面的id对应
                    'queueSizeLimit' :1,
                    'fileTypeDesc'   : 'rar文件或zip文件',
                    'fileTypeExts'   : '*.rar;*.zip', //控制可上传文件的扩展名,启用本项时需同时声明fileDesc
                    'multi'          : true,
                    'buttonText'     : '上传'
     });
    });
    </script>
     </head>
    <body>
            <div id="fileQueue"></div>
            <input type="file" name="uploadify" id="uploadify" />
            <p>
                <a href="javascript:$('#uploadify').uploadify('upload')">开始上传</a> 
                <a href="javascript:$('#uploadify').uplaodify('cancel','*')">取消上传</a>
            </p>
      </body>
    </html>

servlet: Uploadify.java

  1. package com.rh.core.upload;  
  2.   
  3. import java.io.BufferedInputStream;  
  4. import java.io.BufferedOutputStream;  
  5. import java.io.File;  
  6. import java.io.FileOutputStream;  
  7. import java.io.IOException;  
  8. import java.text.SimpleDateFormat;  
  9. import java.util.Date;  
  10. import java.util.Iterator;  
  11. import java.util.List;  
  12.   
  13. import javax.servlet.ServletException;  
  14. import javax.servlet.http.HttpServlet;  
  15. import javax.servlet.http.HttpServletRequest;  
  16. import javax.servlet.http.HttpServletResponse;  
  17.   
  18. import org.apache.commons.fileupload.disk.DiskFileItem;  
  19. import org.apache.commons.fileupload.disk.DiskFileItemFactory;  
  20. import org.apache.commons.fileupload.servlet.ServletFileUpload;  
  21. import org.apache.commons.fileupload.util.Streams;  
  22.   
  23. public class Uploadify extends HttpServlet{  
  24.     private static final long serialVersionUID = 1L;    
  25.         
  26.     /**  
  27.      * 实现多文件的同时上传  
  28.      */     
  29.     public void doGet(HttpServletRequest request,    
  30.             HttpServletResponse response) throws ServletException, IOException {    
  31.             
  32.         //设置接收的编码格式    
  33.         request.setCharacterEncoding(”UTF-8”);    
  34.         Date date = new Date();//获取当前时间    
  35.         SimpleDateFormat sdfFileName = new SimpleDateFormat(“yyyyMMddHHmmss”);    
  36.         SimpleDateFormat sdfFolder = new SimpleDateFormat(“yyMM”);    
  37.         String newfileName = sdfFileName.format(date);//文件名称    
  38.         String fileRealPath = ”“;//文件存放真实地址    
  39.             
  40.         String fileRealResistPath = ”“;//文件存放真实相对路径    
  41.             
  42.         //名称  界面编码 必须 和request 保存一致..否则乱码    
  43.         String name = request.getParameter(”name”);    
  44.                 
  45.              
  46.         String firstFileName=”“;    
  47.         // 获得容器中上传文件夹所在的物理路径    
  48.         String savePath = this.getServletConfig().getServletContext().getRealPath(“/”) + “uploads\\” + newfileName +”\\”;    
  49.         System.out.println(”路径” + savePath+“; name:”+name);    
  50.         File file = new File(savePath);    
  51.         if (!file.isDirectory()) {    
  52.             file.mkdirs();    
  53.         }    
  54.     
  55.         try {    
  56.             DiskFileItemFactory fac = new DiskFileItemFactory();    
  57.             ServletFileUpload upload = new ServletFileUpload(fac);    
  58.             upload.setHeaderEncoding(”UTF-8”);    
  59.             // 获取多个上传文件    
  60.             List fileList = fileList = upload.parseRequest(request);    
  61.             // 遍历上传文件写入磁盘    
  62.             Iterator it = fileList.iterator();    
  63.             while (it.hasNext()) {    
  64.                 Object obit = it.next();  
  65.                 if(obit instanceof DiskFileItem){  
  66.                     System.out.println(”xxxxxxxxxxxxx”);  
  67.                     DiskFileItem item = (DiskFileItem) obit;    
  68.                         
  69.                     // 如果item是文件上传表单域       
  70.                     // 获得文件名及路径       
  71.                     String fileName = item.getName();    
  72.                     if (fileName != null) {    
  73.                         firstFileName=item.getName().substring(item.getName().lastIndexOf(”\\”)+1);    
  74.                         String formatName = firstFileName.substring(firstFileName.lastIndexOf(”.”));//获取文件后缀名    
  75.                         fileRealPath = savePath + newfileName+ formatName;//文件存放真实地址    
  76.                             
  77.                         BufferedInputStream in = new BufferedInputStream(item.getInputStream());// 获得文件输入流    
  78.                         BufferedOutputStream outStream = new BufferedOutputStream(new FileOutputStream(new File(fileRealPath)));// 获得文件输出流    
  79.                         Streams.copy(in, outStream, true);// 开始把文件写到你指定的上传文件夹    
  80.                         //上传成功,则插入数据库    
  81.                         if (new File(fileRealPath).exists()) {    
  82.                             //虚拟路径赋值    
  83.                             fileRealResistPath=sdfFolder.format(date)+”/”+fileRealPath.substring(fileRealPath.lastIndexOf(“\\”)+1);    
  84.                             //保存到数据库    
  85.                             System.out.println(”保存到数据库:”);    
  86.                             System.out.println(”name:”+name);    
  87.                             System.out.println(”虚拟路径:”+fileRealResistPath);    
  88.                         }    
  89.                              
  90.                     }     
  91.                 }  
  92.             }     
  93.         } catch (org.apache.commons.fileupload.FileUploadException ex) {  
  94.            ex.printStackTrace();    
  95.            System.out.println(”没有上传文件”);    
  96.            return;    
  97.         }     
  98.        response.getWriter().write(”1”);    
  99.             
  100.     }    
  101.      
  102.     public void doPost(HttpServletRequest req, HttpServletResponse resp)    
  103.             throws ServletException, IOException {    
  104.         doGet(req, resp);    
  105.     }    
  106. }  
package com.rh.core.upload;

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Iterator;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.disk.DiskFileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.fileupload.util.Streams;

public class Uploadify extends HttpServlet{
    private static final long serialVersionUID = 1L;  

    /** 
     * 实现多文件的同时上传 
     */   
    public void doGet(HttpServletRequest request,  
            HttpServletResponse response) throws ServletException, IOException {  

        //设置接收的编码格式  
        request.setCharacterEncoding("UTF-8");  
        Date date = new Date();//获取当前时间  
        SimpleDateFormat sdfFileName = new SimpleDateFormat("yyyyMMddHHmmss");  
        SimpleDateFormat sdfFolder = new SimpleDateFormat("yyMM");  
        String newfileName = sdfFileName.format(date);//文件名称  
        String fileRealPath = "";//文件存放真实地址  

        String fileRealResistPath = "";//文件存放真实相对路径  

        //名称  界面编码 必须 和request 保存一致..否则乱码  
        String name = request.getParameter("name");  


        String firstFileName="";  
        // 获得容器中上传文件夹所在的物理路径  
        String savePath = this.getServletConfig().getServletContext().getRealPath("/") + "uploads\\" + newfileName +"\\";  
        System.out.println("路径" + savePath+"; name:"+name);  
        File file = new File(savePath);  
        if (!file.isDirectory()) {  
            file.mkdirs();  
        }  

        try {  
            DiskFileItemFactory fac = new DiskFileItemFactory();  
            ServletFileUpload upload = new ServletFileUpload(fac);  
            upload.setHeaderEncoding("UTF-8");  
            // 获取多个上传文件  
            List fileList = fileList = upload.parseRequest(request);  
            // 遍历上传文件写入磁盘  
            Iterator it = fileList.iterator();  
            while (it.hasNext()) {  
                Object obit = it.next();
                if(obit instanceof DiskFileItem){
                    System.out.println("xxxxxxxxxxxxx");
                    DiskFileItem item = (DiskFileItem) obit;  

                    // 如果item是文件上传表单域     
                    // 获得文件名及路径     
                    String fileName = item.getName();  
                    if (fileName != null) {  
                        firstFileName=item.getName().substring(item.getName().lastIndexOf("\\")+1);  
                        String formatName = firstFileName.substring(firstFileName.lastIndexOf("."));//获取文件后缀名  
                        fileRealPath = savePath + newfileName+ formatName;//文件存放真实地址  

                        BufferedInputStream in = new BufferedInputStream(item.getInputStream());// 获得文件输入流  
                        BufferedOutputStream outStream = new BufferedOutputStream(new FileOutputStream(new File(fileRealPath)));// 获得文件输出流  
                        Streams.copy(in, outStream, true);// 开始把文件写到你指定的上传文件夹  
                        //上传成功,则插入数据库  
                        if (new File(fileRealPath).exists()) {  
                            //虚拟路径赋值  
                            fileRealResistPath=sdfFolder.format(date)+"/"+fileRealPath.substring(fileRealPath.lastIndexOf("\\")+1);  
                            //保存到数据库  
                            System.out.println("保存到数据库:");  
                            System.out.println("name:"+name);  
                            System.out.println("虚拟路径:"+fileRealResistPath);  
                        }  

                    }   
                }
            }   
        } catch (org.apache.commons.fileupload.FileUploadException ex) {
           ex.printStackTrace();  
           System.out.println("没有上传文件");  
           return;  
        }   
       response.getWriter().write("1");  

    }  

    public void doPost(HttpServletRequest req, HttpServletResponse resp)  
            throws ServletException, IOException {  
        doGet(req, resp);  
    }  
}

web.xml

  1. <?xml version=“1.0” encoding=“UTF-8”?>  
  2. <web-app id=“WebApp_ID” version=“2.4”   
  3.     xmlns=“http://java.sun.com/xml/ns/j2ee”   
  4.     xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance”   
  5.     xsi:schemaLocation=”http://java.sun.com/xml/ns/j2ee   
  6.     http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd”>  
  7.   
  8.     <servlet>    
  9.      <servlet-name>Uploadify</servlet-name>    
  10.      <servlet-class>com.rh.core.upload.Uploadify</servlet-class>    
  11.     </servlet>    
  12.     <servlet-mapping>    
  13.      <servlet-name>Uploadify</servlet-name>    
  14.      <url-pattern>/scripts/uploadify</url-pattern>    
  15.     </servlet-mapping>  
  16.     <welcome-file-list>  
  17.         <welcome-file>index.jsp</welcome-file>  
  18.     </welcome-file-list>  
  19. </web-app>  
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" 
    xmlns="http://java.sun.com/xml/ns/j2ee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
    http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

    <servlet>  
     <servlet-name>Uploadify</servlet-name>  
     <servlet-class>com.rh.core.upload.Uploadify</servlet-class>  
    </servlet>  
    <servlet-mapping>  
     <servlet-name>Uploadify</servlet-name>  
     <url-pattern>/scripts/uploadify</url-pattern>  
    </servlet-mapping>
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
</web-app>

项目截图:(可能需要修改css文件中图片的位置)



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值