snd-escloud/target/classes/static/js/common/webUploadUtil.js

/**
 * 对百度WebUploader的封装
 * 因为这里考虑到每个需求可能不一样，比如文件大小限制，文件格式限制，宽高等，还是没法做成共通的插件
 * 所以这些基本参数需要调用者自己定义，这里对回调进行了封装，调用者无需关心处理回调
 */
(function () {
    // 判断ie有没有安装flash播放器
    function IEVersion() {
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE浏览器
        if (isIE) {
            var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
            reIE.test(userAgent);
            var fIEVersion = parseFloat(RegExp["$1"]);
            if (fIEVersion == 7 || fIEVersion == 8 || fIEVersion == 9) {
                var hasFlash = false;
                try {
                    hasFlash = Boolean(new ActiveXObject('ShockwaveFlash.ShockwaveFlash'));
                } catch (exception) {
                    hasFlash = ('undefined' != typeof navigator.mimeTypes['application/x-shockwave-flash']);
                    var r = confirm("您的浏览器不支持上传文件，请安装flash播放器");
                    if (r == true) {
                        window.open("https://get.adobe.com/tw/flashplayer/");
                    }
                    else {
                    }
                }
            }
        }
    };
    /**
     * 图片
     * @param options
     */
    var $WebUploadPicture = function (options) {
        this.auto = options.auto || true;  //开启自动上传
        this.uploadBtnId = options.uploadBtnId || '#filePicker'; //选择图片按钮，id|class自己定义
        this.uploadPreId = options.picturePreId || 'fileListPre'; //图片预览ID
        this.uploadUrl = options.serverUrl || pagePath + '/upload/images';    //上传URL
        this.swf = pagePath + '/h-ui/lib/webuploader/0.1.5/Uploader.swf';
        this.pictureUrl = options.hiddenPictureUrl || 'fileDown.file_id';   //隐藏域name,用于往后台传值
        this.picWidth = options.width;  //图片宽度
        this.picHeight = options.height; //图片高度
        this.fileSizeLimit = 300 * 1024 * 1024;   //验证文件总大小是否超出限制, 超出则不允许加入队列
        this.fileSingleSizeLimit = 300 * 1024 * 1024;   // 验证单个文件大小是否超出限制, 超出则不允许加入队列

        //this.fileSizeLimit = options.fileSizeLimit || 100 * 1024 * 1024;   //验证文件总大小是否超出限制, 超出则不允许加入队列
        //this.fileSingleSizeLimit = options.fileSingleSizeLimit || 100 * 1024 * 1024;   // 验证单个文件大小是否超出限制, 超出则不允许加入队列
        this.fileNumLimit = options.fileNumLimit || undefined;   // 验证文件总数量, 超出则不允许加入队列
        this.accept = options.accept;  //指定接受哪些类型的文件
        this.append = options.append || false;  //是否开启追加多个图片
        this.uploadBarId = null;      //图片上传的进度条的id
    };
    var
        // 优化retina, 在retina下这个值是2
        ratio = window.devicePixelRatio || 1,
        // 缩略图大小
        thumbnailWidth = 100 * ratio,
        thumbnailHeight = 100 * ratio;
    $WebUploadPicture.prototype = {


        /**
         * 初始化webUploader
         */
        init: function () {
            // 判断ie有没有安装flash播放器
            IEVersion();
            var uploader = this.create();
            this.bindEvent(uploader);
            return uploader;
        },

        /**
         * 创建webuploader对象
         */
        create: function () {
            return WebUploader.create({
                auto: this.auto,
                pick: {
                    id: this.uploadBtnId,
                    multiple: true // 只上传一个
                },
                accept: this.accept,
                swf: this.swf,
                disableGlobalDnd: true,
                duplicate: true,
                server: this.uploadUrl,
                fileSizeLimit: this.fileSizeLimit,
                fileSingleSizeLimit: this.fileSingleSizeLimit,
                fileNumLimit: this.fileNumLimit
            });
        },

        /**
         * 绑定事件
         */
        bindEvent: function (bindObj) {
            var me = this;
            //当文件被加入队列以后触发
            //当文件被加入队列以后触发
            bindObj.on('fileQueued', function (file) {
                var $li = $(
                    '<div id="' + file.id + '" class="file-item thumbnail">' +
                    '<img width="' + me.picWidth + '" height="' + me.picHeight + '">' +
                    '<input type="hidden" name="' + me.pictureUrl + '" id="' + file.id + 'PicUrl" />' +
                    '<a href="javascript:;" onclick="delDoc(this);">删除</a>' +
                    '<div class="info">' + file.name + '</div>' +
                    '</div>'
                );
                // var $li = $('<div><img width="100px" height="100px"></div>');
                var $img = $li.find('img');
                if (me.append) {
                    $("#" + me.uploadPreId).append($li);
                } else {
                    $("#" + me.uploadPreId).html($li);
                }

                // 生成缩略图
                bindObj.makeThumb(file, function (error, src) {
                    if (error) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
                    $img.attr('src', src);
                }, thumbnailWidth, thumbnailHeight);
            });

            // 文件上传过程中创建进度条实时显示。
            bindObj.on('uploadProgress', function (file, percentage) {
                // $("#"+me.uploadBarId).css("width",percentage * 100 + "%");
                var $li = $('#' + file.id),
                    $percent = $li.find('.progress span');

                // 避免重复创建
                if (!$percent.length) {
                    $percent = $('<p class="progress"><span></span></p>')
                        .appendTo($li)
                        .find('span');
                }

                $percent.css('width', percentage * 100 + '%');
            });

            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            bindObj.on('uploadSuccess', function (file, response) {
                succeedMessage("上传成功");
                //隐藏域ID,用于往后台传值
                $("#" + file.id + "PicUrl").val(response);
                $('#' + file.id).addClass('upload-state-done');
                picSuccess = true;
            });

            // 完成上传完了，成功或者失败，先删除进度条。
            bindObj.on('uploadComplete', function (file) {
                $('#' + file.id).find('.progress').remove();
            });


            // 文件上传失败，显示上传出错。
            bindObj.on('uploadError', function (file, response) {
                //errorMessage(response);
                errorMessage('上传出错');
                var $li = $('#' + file.id),
                    $error = $li.find('div.error');

                // 避免重复创建
                if (!$error.length) {
                    $error = $('<div class="error"></div>').appendTo($li);
                }

                $error.text('上传失败');

                //移除上传失败的隐藏域input值
                $('#' + file.id + 'PicUrl').remove();
            });

            // 其他错误
            bindObj.on('error', function (type) {
                if ("Q_EXCEED_SIZE_LIMIT" == type) {
                    errorMessage("文件大小超出了限制");
                } else if ("Q_TYPE_DENIED" == type) {
                    errorMessage("文件类型不满足");
                } else if ("Q_EXCEED_NUM_LIMIT" == type) {
                    errorMessage("上传数量超过限制");
                } else if ("F_DUPLICATE" == type) {
                    errorMessage("图片选择重复");
                } else if ("F_EXCEED_SIZE" == type) {
                    errorMessage("文件大小超出了限制");
                } else {
                    errorMessage("上传过程中出错");
                }
            });

        },

        /**
         * 设置图片上传的进度条的id
         */
        setUploadBarId: function (id) {
            this.uploadBarId = id;
        }
    };


    /**
     * 文件
     * @param options
     */
    var $WebUploadDoc = function (options) {
        this.auto = options.auto || true;  //开启自动上传
        this.uploadBtnId = options.uploadBtnId || '#filePicker'; //选择上传按钮，id|class自己定义
        this.uploadPreId = options.docPreId || 'fileListPre'; //预览ID
        this.uploadUrl = options.serverUrl || pagePath + '/upload/docs';    //上传URL
        this.swf = pagePath + '/h-ui/lib/webuploader/0.1.5/Uploader.swf';
        this.docUrl = options.hiddenDocUrl || 'fileDown.file_id';   //隐藏域name,用于往后台传值

        this.fileSizeLimit = 1024 * 1024 * 1024 * 5;   //验证文件总大小是否超出限制, 超出则不允许加入队列
        this.fileSingleSizeLimit = 1024 * 1024 * 1024 * 5;   // 验证单个文件大小是否超出限制, 超出则不允许加入队列

        //this.fileSizeLimit = options.fileSizeLimit || 100 * 1024 * 1024;   //验证文件总大小是否超出限制, 超出则不允许加入队列
        //this.fileSingleSizeLimit = options.fileSingleSizeLimit || 2 * 1024 * 1024;   // 验证单个文件大小是否超出限制, 超出则不允许加入队列
        this.fileNumLimit = options.fileNumLimit || undefined;   // 验证文件总数量, 超出则不允许加入队列
        this.accept = options.accept;  //指定接受哪些类型的文件
        this.append = options.append || false;  //是否开启追加多个
        this.uploadBarId = null;      //上传的进度条的id
    };


    $WebUploadDoc.prototype = {
        /**
         * 初始化webUploader
         */
        init: function () {
            IEVersion();
            var uploader = this.create();
            this.bindEvent(uploader);
            return uploader;
        },

        /**
         * 创建webuploader对象
         */
        create: function () {
            return WebUploader.create({
                auto: this.auto,
                pick: {
                    id: this.uploadBtnId,
                    multiple: false // 只上传一个
                },
                accept: this.accept,
                swf: this.swf,
                disableGlobalDnd: true,
                duplicate: true,
                server: this.uploadUrl,
                fileSizeLimit: this.fileSizeLimit,
                fileSingleSizeLimit: this.fileSingleSizeLimit,
                fileNumLimit: this.fileNumLimit
            });
        },

        /**
         * 绑定事件
         */
        bindEvent: function (bindObj) {
            var me = this;

            //当文件被加入队列以后触发
            bindObj.on('fileQueued', function (file) {
                var $li = $(
                    '<div id="' + file.id + '" class="item">' +
                    '<h4 class="info">' + file.name + '</h4>' +
                    '<input type="hidden" name="' + me.docUrl + '" id="' + file.id + 'DocUrl" />' +
                    '<a href="javascript:;" onclick="delDoc(this);">删除</a>' +
                    '<p class="state">等待上传...</p>' +
                    '</div>'
                );
                if (me.append) {
                    $("#" + me.uploadPreId).append($li);
                } else {
                    $("#" + me.uploadPreId).html($li);
                }
            });

            // 文件上传过程中创建进度条实时显示。
            bindObj.on('uploadProgress', function (file, percentage) {
                // $("#"+me.uploadBarId).css("width",percentage * 100 + "%");
                var $li = $('#' + file.id),
                    $percent = $li.find('.progress .progress-bar');

                // 避免重复创建
                if (!$percent.length) {
                    $percent = $('<div class="progress progress-striped active">' +
                        '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                        '</div>' +
                        '</div>').appendTo($li).find('.progress-bar');
                }

                $li.find('p.state').text('上传中');

                $percent.css('width', percentage * 100 + '%');
            });

            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            bindObj.on('uploadSuccess', function (file, response) {
                succeedMessage("上传成功");
                //隐藏域ID,用于往后台传值
                $("#" + file.id + "DocUrl").val(response);
                $('#' + file.id).find('p.state').text('已上传');
            });

            // 完成上传完了，成功或者失败，先删除进度条。
            bindObj.on('uploadComplete', function (file) {
                // $( '#'+file.id ).find('.progress').fadeOut();
                $('#' + file.id).find('.progress').remove();
            });


            // 文件上传失败，显示上传出错。
            bindObj.on('uploadError', function (file, response) {
                //errorMessage(response);
                errorMessage('上传出错');
                $('#' + file.id).find('p.state').text('上传出错');
                //移除上传失败的隐藏域input值
                $('#' + file.id + 'DocUrl').remove();
                //不显示错误文件
                $('#' + file.id).remove();
            });

            // 其他错误
            bindObj.on('error', function (type) {
                if ("Q_EXCEED_SIZE_LIMIT" == type) {
                    errorMessage("文件大小超出了限制");
                } else if ("Q_TYPE_DENIED" == type) {
                    errorMessage("文件类型不满足");
                } else if ("Q_EXCEED_NUM_LIMIT" == type) {
                    errorMessage("上传数量超过限制");
                } else if ("F_DUPLICATE" == type) {
                    errorMessage("文件选择重复");
                } else if ("F_EXCEED_SIZE" == type) {
                    errorMessage("文件大小超出了限制");
                } else {
                    errorMessage("上传过程中出错");
                }
            });
        },

        /**
         * 设置图片上传的进度条的id
         */
        setUploadBarId: function (id) {
            this.uploadBarId = id;
        }
    };

    /**
     * 文件
     * @param options
     */
    var $WebUploadDocList = function (options) {
        this.auto = options.auto || true;  //开启自动上传
        this.uploadBtnId = options.uploadBtnId || '#filePicker'; //选择上传按钮，id|class自己定义
        this.uploadPreId = options.docPreId || 'fileListPre'; //预览ID
        this.uploadUrl = options.serverUrl || pagePath + '/upload/docs';    //上传URL
        this.swf = pagePath + '/h-ui/lib/webuploader/0.1.5/Uploader.swf';
        this.docUrl = options.hiddenDocUrl || 'fileDown.file_id';   //隐藏域name,用于往后台传值

        this.fileSizeLimit = 1024 * 1024 * 1024 * 5;   //验证文件总大小是否超出限制, 超出则不允许加入队列
        this.fileSingleSizeLimit = 1024 * 1024 * 1024 * 5;   // 验证单个文件大小是否超出限制, 超出则不允许加入队列

        //this.fileSizeLimit = options.fileSizeLimit || 100 * 1024 * 1024;   //验证文件总大小是否超出限制, 超出则不允许加入队列
        //this.fileSingleSizeLimit = options.fileSingleSizeLimit || 2 * 1024 * 1024;   // 验证单个文件大小是否超出限制, 超出则不允许加入队列
        this.fileNumLimit = options.fileNumLimit || undefined;   // 验证文件总数量, 超出则不允许加入队列
        this.accept = options.accept;  //指定接受哪些类型的文件
        this.append = options.append || false;  //是否开启追加多个
        this.uploadBarId = null;      //上传的进度条的id
    };

    var file_index = 0;
    $WebUploadDocList.prototype = {
        /**
         * 初始化webUploader
         */
        init: function () {
            IEVersion();
            var uploader = this.create();
            this.bindEvent(uploader);
            return uploader;
        },

        /**
         * 创建webuploader对象
         */
        create: function () {
            return WebUploader.create({
                auto: this.auto,
                pick: {
                    id: this.uploadBtnId,
                    multiple: false // 只上传一个
                },
                accept: this.accept,
                swf: this.swf,
                disableGlobalDnd: true,
                duplicate: true,
                server: this.uploadUrl,
                fileSizeLimit: this.fileSizeLimit,
                fileSingleSizeLimit: this.fileSingleSizeLimit,
                fileNumLimit: this.fileNumLimit
            });
        },

        /**
         * 绑定事件
         */
        bindEvent: function (bindObj) {
            var me = this;

            //当文件被加入队列以后触发
            bindObj.on('fileQueued', function (file) {
                /*var $li = $(
                    '<div id="' + file.id + '" class="item">' +
                    '<h4 class="info">' + file.name + '</h4>' +
                    '<input type="hidden" name="' + me.docUrl + '" id="' + file.id + 'DocUrl" />' +
                    '<a href="javascript:;" onclick="delDoc(this);">删除</a>' +
                    '<p class="state">等待上传...</p>' +
                    '</div>'
                );*/

                //'<a href="${fileUrl} + ${czMaterials.file_url}" target="_blank" text="${czMaterials.file_name}" style="color: #5b98dd;"></a>'

                var str = ''
                str += '<tr class="text-c">'
                str += '<td><input name="fileDownList[' + file_index + '].file_name" maxlength="40"/><input hidden id="' + file.id + '" name="fileDownList[' + file_index + '].file_id" /></td>';
                str += '<td>' + file.name + '</td>';
                str += '<td><a href="javascript:;" onclick="delDocList(this);">删除</a></td>';
                str += '</tr>'
                /*if (me.append) {
                    $("#uploadList").append(str);
                } else {
                    $("#uploadList").html(str);
                }*/
                $("#uploadList").append(str);
                file_index++;
            });

            // 文件上传过程中创建进度条实时显示。
            bindObj.on('uploadProgress', function (file, percentage) {


                var $div = $('#progress'),
                    $percent = $div.find('.progress .progress-bar');

                // 避免重复创建
                if (!$percent.length) {
                    $percent = $('<div class="progress progress-striped active">' +
                        '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                        '</div>' +
                        '</div>').appendTo($div).find('.progress-bar');
                }

                $('#state').text('上传中');

                $percent.css('width', percentage * 100 + '%');

                if (percentage == 1) {
                    $('#state').text('上传完成');
                }
            });

            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            bindObj.on('uploadSuccess', function (file, response) {
                succeedMessage("上传成功");
                //隐藏域ID,用于往后台传值
                //$("#" + file.id + "DocUrl").val(response);
                //$( '#'+file.id ).find('p.state').text('已上传');
                //console.log(file)
                //console.log(response)
                $("#" + file.id ).val(response);
            });

            // 完成上传完了，成功或者失败，先删除进度条。
            bindObj.on('uploadComplete', function (file) {
                // $( '#'+file.id ).find('.progress').fadeOut();
                $('#progress').find('.progress').remove();
                //$('.state').remove();
            });


            // 文件上传失败，显示上传出错。
            bindObj.on('uploadError', function (file, response) {
                //errorMessage(response);
                errorMessage('上传出错');
                $('#' + file.id).find('p.state').text('上传出错');
                //移除上传失败的隐藏域input值
                $('#' + file.id + 'DocUrl').remove();
                //不显示错误文件
                $('#' + file.id).remove();
            });

            // 其他错误
            bindObj.on('error', function (type) {
                if ("Q_EXCEED_SIZE_LIMIT" == type) {
                    errorMessage("文件大小超出了限制");
                } else if ("Q_TYPE_DENIED" == type) {
                    errorMessage("文件类型不满足");
                } else if ("Q_EXCEED_NUM_LIMIT" == type) {
                    errorMessage("上传数量超过限制");
                } else if ("F_DUPLICATE" == type) {
                    errorMessage("文件选择重复");
                } else if ("F_EXCEED_SIZE" == type) {
                    errorMessage("文件大小超出了限制");
                } else {
                    errorMessage("上传过程中出错");
                }
            });
        },

        /**
         * 设置图片上传的进度条的id
         */
        setUploadBarId: function (id) {
            this.uploadBarId = id;
        }
    };

    window.$WebUploadDocList = $WebUploadDocList;
    window.$WebUploadPicture = $WebUploadPicture;
    window.$WebUploadDoc = $WebUploadDoc;

}());


function delDoc(obj) {
    var $this = $(obj);
    $this.parent("div").remove();
}

function delDocList(obj) {
    var $this = $(obj);
    $this.parent().parent().remove();
}