【原创】plupload多文件上传

webutils.js

/**
 * 多文件上传
 * @param selectBtnId 选择按钮ID
 * @param uploadBtnId 上传按钮ID
 * @param path 上传到的路径
 * @param filesAddedCallback 添加文件回调，2个参数(fileId, fileName)
 * @param uploadProgressCallback 文件上传进度回调，4个参数(fileId, fileName, filePercent, totalPercent)
 * @param fileUploadedCallback 单文件上传完成回调，2个参数(fileName, url)
 * @param uploadCompleteCallback 全部文件上传完成回调，没有参数
 * @param errorCallback 文件上传失败上传回调，1个参数(message)
 */
function initMultiImageUpload(selectBtnId, uploadBtnId, path, filesAddedCallback, uploadProgressCallback,
                              fileUploadedCallback, uploadCompleteCallback, errorCallback) {
    var uploader = new plupload.Uploader({
        runtimes: 'html5,flash,gears,browserplus,silverlight,html4',
        browse_button: selectBtnId, //DOM元素或者id
        url: uploadSimpleUrl + 'param=' + path + '&pressText=&cutImg=&width=&height=', //服务器端的上传页面地址
        chunk_size: '1mb',
        flash_swf_url: baselocation + "/static/common/plupload/js/Moxie.swf", //flash上传组件的url地址
        silverlight_xap_url: baselocation + "${ctx}/static/common/plupload/js/Moxie.xap", //silverlight上传组件的url地址
        multi_selection: true
    });
    //当文件添加到上传队列后触发
    uploader.bind('FilesAdded',
        function(uploader,files) {
            $.each(files, function (i,file) {
                filesAddedCallback(file.id, file.name);
            });
        }
    );
    //会在文件上传过程中不断触发
    uploader.bind('UploadProgress',
        function(uploader,file) {
            uploadProgressCallback(file.id, file.name, file.percent, uploader.total.percent);
        }
    );
    //当队列中的某一个文件上传完成后触发
    uploader.bind('FileUploaded',
        function(uploader,file,responseObject) {
            var data = $.parseJSON(responseObject.response);
            if(data.error == 0){
                fileUploadedCallback(data.fileName, data.url);
            }else {
                errorCallback(data.message);
            }
        }
    );
    //当上传队列中所有文件都上传完成后触发
    uploader.bind('UploadComplete',
        function(uploader,files) {
            uploadCompleteCallback();
        }
    );
    //当发生错误时触发
    uploader.bind('Error',
        function(uploader,errObject) {
            errorCallback(errObject.message);
        }
    );
    //删除文件
    plupload.Uploader.prototype.deleteFile = function (fileId) {
        try {
            var files = uploader.files;
            $.each(files, function (i,file) {
                if(file.id == fileId) {
                    files.splice(i, 1);
                    $("#" + fileId).remove();
                }
            });
        } catch(e) {}
    }
    //初始化Plupload实例
    uploader.init();
    $("#" + uploadBtnId).on("click", function() {
        uploader.start(); //开始上传
    });
    return uploader;
}

test.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ include file="/base.jsp"%>
<script type="text/javascript" src="${ctx}/static/common/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="${ctx}/static/common/webutils.js"></script>
<!-- plupload.js -->
<script type="text/javascript" src="${ctx}/static/common/plupload/js/plupload.full.min.js"></script>
<!-- 国际化 -->
<script type="text/javascript" src="${ctx}/static/common/plupload/js/i18n/zh_CN.js"></script>
<!-- 编码 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<div id="liulan">添加</div>
<div id="shangchuan">上传</div>
<div id="jindu">0%</div>
<div id="liebiao"></div>
<script>
    var baselocation = "${ctx}";
    var uploadSimpleUrl = "${ctx}/image/plupload?";

    // 添加文件回调
    function filesAddedCallback(fileId, fileName) {
        $('#liebiao').append(
            '<div id="' + fileId + '">' +
                fileName +
                '<a href="javascript:void(0);" onclick="uploader.deleteFile(\'' + fileId + '\')">删除</a>' +
            '</div>');
    }
    // 文件上传进度回调
    function uploadProgressCallback(fileId, fileName, filePercent, totalPercent) {
        $('#' + fileId).text(fileName + ' ' + filePercent + '%');
        $('#jindu').text(totalPercent + '%');
    }
    //单文件上传完成回调
    function fileUploadedCallback(fileName, url) {
        console.info("callback " + fileName + " " + url + " ok!");
    }
    // 全部文件上传完成回调
    function uploadCompleteCallback() {
        console.info("全部文件上传成功！");
    }
    //文件上传失败上传回调
    function errorCallback(message) {
        console.info(message);
    }

    var uploader = initMultiImageUpload("liulan", "shangchuan", "test", filesAddedCallback, uploadProgressCallback,
        fileUploadedCallback, uploadCompleteCallback, errorCallback);
</script>