【原创】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"%>








添加
上传
0%