zoukankan      html  css  js  c++  java

  • jquery uploadify插件多文件上传

    1、jquery uploadify 下载：http://www.uploadify.com/

     

    2、安装：解压后拷贝的工程目录下面，如：WebRoot/uploaddify

     

    3、配置项说明：

           uploader： uploadify.swf 文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框，默认值：uploadify.swf。

            onInit :做一些初始化的工作。

    　　 onSelect：选择文件时触发，该函数有三个参数

    　 　event:事件对象。

    　　 queueID：文件的唯一标识，由6为随机字符组成。

    　　 fileObj：选择的文件对 象，有name、size、creationDate、modificationDate、type 5个属性

           onSelectOnce：在单文件或多文件上传时，选择文件时触发。该函数有两个参数event，data，data对象有以下几个属性：

    　 　fileCount：选择文件的总数。

    　　 filesSelected：同时选择文件的个数，如果一次选择了3个文件该属性值为3。

    　 　filesReplaced：如果文件队列中已经存在A和B两个文件，再次选择文件时又选择了A和B，该属性值为2。

    　　 allBytesTotal：所有选择的文件的总大小。

    　　 onCancel :当点击文件队列中文件的关闭按钮或点击取消上传时触发。该函数有event、queueId、fileObj、data四个参数，前三个参数同

    　 　onSelect中的三个参数，data对象有两个属性fileCount和allBytesTotal。

    　　 fileCount：取消 一个文件后，文件队列中剩余文件的个数。

    　　 allBytesTotal：取消一个文件后，文件队列中剩余文件的大小。

    　 　onClearQueue：当调用函数fileUploadClearQueue时触发。有event和data两个参数，同onCancel 中的两个对应参数。

    　　 onQueueFull ：当设置了queueSizeLimit并且选择的文件个数超出了queueSizeLimit的值时触发。该函数有两个参数event和 queueSizeLimit。

    　　 onError ：当上传过程中发生错误时触发。该函数有event、queueId、fileObj、errorObj四个参数，其中前三个参数同上，errorObj 对象有type和info两个属性。

    　　 type：错误的类型，有三种‘HTTP’, ‘IO’, or ‘Security’

    　 　info：错误的描述

    　    onOpen ：点击上传时触发，如果auto设置为true则是选择文件时触发，如果有多个文件上传则遍历整个文件队列。该函数有event、queueId、 fileObj三个参数，参数的解释同上。

    　　 onProgress：点击上传时触发，如果auto设置为true则是选择文件时触发，如 果有多个文件上传则遍历整个文件队列，在onOpen之后触发。该函数有 event、queueId、fileObj、data四个参数，前三个参数的解释同上。data对象有四个属性percentage、 bytesLoaded、allBytesLoaded、speed：

    　　 percentage：当前完成的百分比

    　　 bytesLoaded：当前上传的大小

    　　 allBytesLoaded：文件队列中已经上传完的大小

    　　 speed：上传速率 kb/s

    　　 onComplete：文件上传完成后触发。该函数有四个参数event、queueId、 fileObj、response、data五个参数，前三个参数同上。response为后台处理程序返回的值，在上面的例子中为1或0，data有两 个属性fileCount和speed

    　　 fileCount：剩余没有上传完成的文件的个数。

    　　 speed：文件上传 的平均速率 kb/s

    　　 onAllComplete：文件队列中所有的文件上传完成后触发。该函数有event和data两个参 数，data有四个属性，分别为：

    　　 filesUploaded :上传的所有文件个数。

    　　 errors ：出现错误的个数。

    　　 allBytesLoaded ：所有上传文件的总大小。

    　　 speed ：平均上传速率 kb/s

    　　相关函数介绍

    　　在上面的例子中已经用了uploadifyUpload和 uploadifyClearQueue两个函数，除此之外还有几个函数：

    　　 uploadifySettings：可以动态修改上面介绍 的那些key值，如下面代码

    　　 $('#uploadify').uploadifySettings('folder','JS');

    　 　如果上传按钮的事件写成下面这样，文件将会上传到uploadifySettings定义的目录中

        <a　 href="javascript:$('#uploadify').uploadifySettings('folder','JS');
        $('#uploadify').uploadifyUpload()"> 上传</a>

    　　 uploadifyCancel：该函数接受一个queueID作为参数，可以取消文件队列中 指定queueID的文件。

    　　$('#uploadify').uploadifyCancel(id);

     

     

    4、使用：

    前台

    Jsp代码  收藏代码
    1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
    2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >  
    3. <html>  
    4. <head>  
    5. <title>uploadify-实例</title>  
    6. <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">  
    7. <link href="uploadify/css/default.css" rel="stylesheet" type="text/css" />  
    8. <link href="uploadify/css/uploadify.css" rel="stylesheet" type="text/css" />  
    9. <script type="text/javascript" src="uploadify/scripts/jquery-1.3.2.min.js"></script>  
    10. <script type="text/javascript" src="uploadify/scripts/swfobject.js"></script>  
    11. <script type="text/javascript" src="uploadify/scripts/jquery.uploadify.v2.1.0.min.js"></script>  
    12. <script type="text/javascript">  
    13. $(document).ready(function() {  
    14.     $("#uploadify").uploadify({  
    15.         'uploader'       : 'uploadify/scripts/uploadify.swf',  
    16.         'script'         : 'UploadPhotoServlet',  
    17.         'cancelImg'      : 'uploadify/cancel.png',  
    18.         'buttonImg'      : 'uploadify/buttonImg.png',  
    19.         'folder'         : '/jxdBlog/photos',  
    20.         'queueID'        : 'fileQueue',  
    21.         'auto'           : false,  
    22.         'multi'          : true,  
    23.         'wmode'          : 'transparent',  
    24.         'simUploadLimit' : 999,  
    25.         'fileExt'        : '*.png;*.gif;*.jpg;*.bmp;*.jpeg',  
    26.         'fileDesc'       : '图片文件(*.png;*.gif;*.jpg;*.bmp;*.jpeg)',  
    27.         'onAllComplete'  :function(event,data)   
    28.         {  
    29.             $('#result').html(data.filesUploaded +'个图片上传成功');  
    30.         }  
    31.     });  
    32. });  
    33. </script>  
    34. <style type="text/css">  
    35. .inputcss  
    36. {  
    37.     color:#333333;  
    38.     font-family: "Tahoma";   
    39.     font-size: 12px;   
    40.     border:solid 1px #CCCCCC;  
    41. }  
    42. .buttoncss  
    43. {  
    44.     color:#333333;  
    45.     font-family: "Tahoma";   
    46.     font-size: 12px;   
    47.     background-color:#FFFFFF;  
    48.     border:solid 1px #CCCCCC;  
    49. }  
    50. </style>  
    51. </head>  
    52. <body>  
    53.     <table style=" 90%;">  
    54.         <tr>  
    55.             <td style=" 100px;">  
    56.                 <input type="file" name="uploadify" id="uploadify" />  
    57.             </td>  
    58.             <td align="left">  
    59.                 <a href="javascript:$('#uploadify').uploadifyUpload()">开始上传</a>|  
    60.             <a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消上传</a>  
    61.             <span id="result" style="font-size: 13px;color: red"></span>  
    62.             </td>  
    63.         </tr>  
    64.     </table>  
    65.         <div id="fileQueue" style=" 400px;height: 300px; border: 2px solid green;"></div>  
    66. </body>  
    67. </html>  

     后台：

    这里需要用到commons-fileupload组件

    所需要的包：

    1、commons-fileupload-1.2.1.jar：

    下载地址 http://commons.apache.org/downloads/download_fileupload.cgi

    2、commons-io-1.4.jar：

    下载地址 http://commons.apache.org/downloads/download_io.cgi

    Java代码  收藏代码
    1. /** 
    2.  * 文件上传实例 
    3.  * @author samLee 
    4.  * 
    5.  */  
    6. public class UploadPhotoServlet extends HttpServlet {  
    7.     private static final long serialVersionUID = 1L;  
    8.          
    9.     public UploadPhotoServlet() {  
    10.         super();  
    11.     }  
    12.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
    13.         this.doPost(request, response);  
    14.     }  
    15.   
    16.     @SuppressWarnings("unchecked")  
    17.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
    18.           
    19.         //文件存放的目录  
    20.         File tempDirPath =new File(request.getSession().getServletContext().getRealPath("/")+"\upload\");  
    21.         if(!tempDirPath.exists()){  
    22.             tempDirPath.mkdirs();  
    23.         }  
    24.           
    25.         //创建磁盘文件工厂  
    26.         DiskFileItemFactory fac = new DiskFileItemFactory();      
    27.         //创建servlet文件上传组件  
    28.         ServletFileUpload upload = new ServletFileUpload(fac);      
    29.         //文件列表  
    30.         List fileList = null;      
    31.         //解析request从而得到前台传过来的文件  
    32.         try {      
    33.             fileList = upload.parseRequest(request);      
    34.         } catch (FileUploadException ex) {      
    35.             ex.printStackTrace();      
    36.             return;      
    37.         }   
    38.         //保存后的文件名  
    39.         String imageName = null;  
    40.         //便利从前台得到的文件列表  
    41.         Iterator<FileItem> it = fileList.iterator();     
    42.         while(it.hasNext()){      
    43.             FileItem item =  it.next();     
    44.             //如果不是普通表单域，当做文件域来处理  
    45.             if(!item.isFormField()){  
    46.             imageName = new Date().getTime()+Math.random()*10000+item.getName();  
    47.                 BufferedInputStream in = new BufferedInputStream(item.getInputStream());     
    48.                 BufferedOutputStream out = new BufferedOutputStream(        
    49.                         new FileOutputStream(new File(tempDirPath+"\"+imageName)));  
    50.                 Streams.copy(in, out, true);  
    51.                   
    52.             }  
    53.         }  
    54.         //  
    55.         PrintWriter out = null;  
    56.         try {  
    57.             out = encodehead(request, response);  
    58.         } catch (IOException e) {  
    59.             e.printStackTrace();  
    60.         }  
    61.         //这个地方不能少，否则前台得不到上传的结果  
    62.         out.write("1");  
    63.         out.close();   
    64.     }  
    65.       
    66.     /** 
    67.      * Ajax辅助方法 获取 PrintWriter 
    68.      * @return 
    69.      * @throws IOException  
    70.      * @throws IOException  
    71.      * request.setCharacterEncoding("utf-8"); 
    72.         response.setContentType("text/html; charset=utf-8"); 
    73.      */  
    74.     private PrintWriter encodehead(HttpServletRequest request,HttpServletResponse response) throws IOException{  
    75.         request.setCharacterEncoding("utf-8");  
    76.         response.setContentType("text/html; charset=utf-8");  
    77.         return response.getWriter();  
    78.     }  
    79. }  

     

     

    　　 script：　　 后台处理程序的相对路径 。默认值：uploadify.php

    　　 checkScript：用来判断上传选择的文 件在服务器是否存在的后台处理程序的相对路径

    　　 fileDataName：设置一个名字，在服务器处理程序中根据该名字来取上传文件的 数据。默认为Filedata

    　　 method： 提交方式Post 或Get 默认为Post

    　　 scriptAccess ：flash脚本文件的访问模式，如果在本地测试设置为always，默认值：sameDomain　

    　　 folder ：上传文件存放的目录 。

    　　 queueID ：文件队列的ID，该ID与存放文件队列的div的ID一致。

    　 　queueSizeLimit ：当允许多文件生成时，设置选择文件的个数，默认值：999 。

    　　 multi ：设置为true时可以上传多个文件。

    　　 auto ：设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 。

    　　 fileDesc ：这个属性值必须设置fileExt属性后才有效，用来设置选择文件对话框中的提示文本，如设置fileDesc为“请选择rar doc pdf文件”

           fileExt ：设置可以选择的文件的类型，格式如：'*.doc;*.pdf;*.rar' 。

    　　 sizeLimit ：上传文件的大小限制 。

    　    simUploadLimit ：允许同时上传的个数 默认值：1 。

    　　 buttonText ：浏览按钮的文本，默认值：BROWSE 。

    　　 buttonImg ：浏览按钮的图片的路径 。

    　　 hideButton ：设置为true则隐藏浏览按钮的图片 。

    　　 rollover ：值为true和false，设置为true时当鼠标移到浏览按钮上时有反转效果。

    　　 width ：设置浏览按钮的宽度 ，默认值：110。

    　　 height ：设置浏览按钮的高度 ，默认值：30。

    　　 wmode ：设置该项为transparent 可以使浏览按钮的flash背景文件透明，并且flash文件会被置为页面的最高层。 默认值：opaque 。

    　 　cancelImg：选择文件到文件队列中后的每一个文件上的关闭按钮图标，
  • 相关阅读:
    EXCEL 函数手册
    php 总结（11）php常用整理
    php 总结（10） PDO 连接数据库 预处理
    Dedecms 常用替换sql命令
    php 总结（9） mysql 字段 编码 相关
    解析XML【C#】
    shell安全脚本
    mysql --secure-file-priv写入文件的说明
    Typora使用技巧及markdown语法
    F-MiddlewareScan中间件扫描工具简单试用
  • 原文地址：https://www.cnblogs.com/lixiaozhe/p/3203404.html
Copyright © 2011-2022 走看看