Jquery.Uploadify实现多文件上传

浏览数：24 / 时间：2015年06月09日

效果图：

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);

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>uploadify-实例</title>
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<link href="uploadify/css/default.css" rel="stylesheet" type="text/css" />
<link href="uploadify/css/uploadify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="uploadify/scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="uploadify/scripts/swfobject.js"></script>
<script type="text/javascript" src="uploadify/scripts/jquery.uploadify.v2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#uploadify").uploadify({
        ‘uploader‘       : ‘uploadify/scripts/uploadify.swf‘,
        ‘script‘         : ‘UploadPhotoServlet‘,
        ‘cancelImg‘      : ‘uploadify/cancel.png‘,
        ‘buttonImg‘         : ‘uploadify/buttonImg.png‘,
        ‘folder‘         : ‘/jxdBlog/photos‘,
        ‘queueID‘        : ‘fileQueue‘,
        ‘auto‘           : false,
        ‘multi‘          : true,
        ‘wmode‘             : ‘transparent‘,
        ‘simUploadLimit‘ : 999,
        ‘fileExt‘         : ‘*.png;*.gif;*.jpg;*.bmp;*.jpeg‘,
        ‘fileDesc‘         : ‘图片文件(*.png;*.gif;*.jpg;*.bmp;*.jpeg)‘,
        ‘onAllComplete‘  :function(event,data) 
        {
            $(‘#result‘).html(data.filesUploaded +‘个图片上传成功‘);
        }
    });
});
</script>
<style type="text/css">
.inputcss
{
    color:#333333;
    font-family: "Tahoma"; 
    font-size: 12px; 
    border:solid 1px #CCCCCC;
}
.buttoncss
{
    color:#333333;
    font-family: "Tahoma"; 
    font-size: 12px; 
    background-color:#FFFFFF;
    border:solid 1px #CCCCCC;
}
</style>
</head>
<body>
    <table style="width: 90%;">
        <tr>
            <td style="width: 100px;">
                <input type="file" name="uploadify" id="uploadify" />
            </td>
            <td align="left">
                <a href="javascript:$(‘#uploadify‘).uploadifyUpload()">开始上传</a>|
            <a href="javascript:jQuery(‘#uploadify‘).uploadifyClearQueue()">取消上传</a>
            <span id="result" style="font-size: 13px;color: red"></span>
            </td>
        </tr>
    </table>
        <div id="fileQueue" style="width: 400px;height: 300px; border: 2px solid green;"></div>
</body>
</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

/**
 * 文件上传实例
 * @author samLee
 *
 */
public class UploadPhotoServlet extends 
HttpServlet {
    private 
static final long serialVersionUID = 1L;
        
    public 
UploadPhotoServlet() {
        super();
    }
    protected 
void doGet(HttpServletRequest request, HttpServletResponse response) throws 
ServletException, IOException {
        this.doPost(request, response);
    }
 
    @SuppressWarnings("unchecked")
    protected 
void doPost(HttpServletRequest request, HttpServletResponse response) throws 
ServletException, IOException {
         
        //文件存放的目录
        File tempDirPath =new 
File(request.getSession().getServletContext().getRealPath("/")+"\\upload\\");
        if(!tempDirPath.exists()){
            tempDirPath.mkdirs();
        }
         
        //创建磁盘文件工厂
        DiskFileItemFactory fac = new 
DiskFileItemFactory();    
        //创建servlet文件上传组件
        ServletFileUpload upload = new 
ServletFileUpload(fac);    
        //文件列表
        List fileList = null;    
        //解析request从而得到前台传过来的文件
        try 
{    
            fileList = upload.parseRequest(request);    
        } catch 
(FileUploadException ex) {    
            ex.printStackTrace();    
            return;    
        } 
        //保存后的文件名
        String imageName = null;
        //便利从前台得到的文件列表
        Iterator<FileItem> it = fileList.iterator();   
        while(it.hasNext()){    
            FileItem item =  it.next();   
            //如果不是普通表单域，当做文件域来处理
            if(!item.isFormField()){
            imageName = new 
Date().getTime()+Math.random()*10000+item.getName();
                BufferedInputStream in = new 
BufferedInputStream(item.getInputStream());   
                BufferedOutputStream out = new 
BufferedOutputStream(      
                        new 
FileOutputStream(new 
File(tempDirPath+"\\"+imageName)));
                Streams.copy(in, out, true);
                 
            }
        }
        //
        PrintWriter out = null;
        try 
{
            out = encodehead(request, response);
        } catch 
(IOException e) {
            e.printStackTrace();
        }
        //这个地方不能少，否则前台得不到上传的结果
        out.write("1");
        out.close(); 
    }
     
    /**
     * Ajax辅助方法 获取 PrintWriter
     * @return
     * @throws IOException 
     * @throws IOException 
     * request.setCharacterEncoding("utf-8");
        response.setContentType("text/html; charset=utf-8");
     */
    private 
PrintWriter encodehead(HttpServletRequest request,HttpServletResponse response) throws 
IOException{
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html; charset=utf-8");
        return 
response.getWriter();
    }
}