webuploader可复用多实例代码参考

在使用webuploader上传文件过程中，如果同一个页面存在多个上传区域，如一个页面中需要传营业执照和资质证书，营业执照资质证书都允许上传多张图片，可以参考本示例代码本示例依赖webuploader相关js及css，基础应用不在本例代码，本例代码提供更优雅的复用示例，只是一个思路，大部分可直接复制使用，特殊需求可根据此代码修改

页面调用div

页面js

webuploadertool.js


(function () {
    var $WebUpload = function (_uploader, url) {
        this._uploader = _uploader;
        this.serverurl = url;
        this.imageExtensions = 'gif,jpg,jpeg,bmp,png';
        this.mimeTypes ='image/gif,image/jpg,image/jpeg,image/bmp,image/png';
        // 缩略图大小
        this.ratio = window.devicePixelRatio || 1,
            this.thumbnailWidth = 160 * this.ratio;
        this.thumbnailHeight = 120 * this.ratio;
        this.fileSizeLimit = 10 * 1024 * 1024;
        this.fileNumLimit = 5;
        this.fileSingleSizeLimit = 10 * 1024 * 1024;
        this.swfurl = BASE_URL + '/js/Uploader.swf';
        this.custsuccess = null;
        this.custerror = null;
        this.fileCount = 0;
        this.WebUploader;
    };
    $WebUpload.prototype = {
        /**
         * 初始化webUploader
         */
        init: function () {
            var uploader = this.create();
            this.bindEvent(uploader);
            return uploader;
        },

        /**
         * 创建webuploader对象
         */
        create: function () {
            var webUploader = WebUploader.create({
                pick: $('._picker', $(this._uploader))[0],
                //dnd: $('._queueList', $(this._uploader))[0],
                // 这里如果要一个页面多个实例，有bug
                // https://github.com/fex-team/webuploader/issues/81#issuecomment-228499631
                accept: {
                    title: 'Images',
                    extensions: this.imageExtensions,
                    mimeTypes: this.mimeTypes
                },
                // swf文件路径
                swf: this.swfurl,
                disableGlobalDnd: true,
                duplicate: false,//不允许上传同一个文件
                auto: true,//自动上传
                server: this.serverurl,
                fileNumLimit: this.fileNumLimit,
                fileSingleSizeLimit: this.fileSingleSizeLimit * 1024 * 1024    // 3 M
            });
            return webUploader;
        },

        /**
         * 绑定事件
         */
        bindEvent: function (bindedObj) {
            var me = this;
            bindedObj.on('fileQueued', function (file) {
                var $li = $('

' + '' + //'
' + file.name + '
' + '
' ), $img = $li.find('img'); // $list为容器jQuery实例 $($('._queueList', $(me._uploader))[0]).append($li); // 创建缩略图 // 如果为非图片文件，可以不用调用此方法。 // thumbnailWidth x thumbnailHeight 为 100 x 100 // bindedObj.makeThumb(file, function (error, src) { // if (error) { // $img.replaceWith('不能预览'); // return; // } // $img.attr('src', src); // }, me.thumbnailWidth, me.thumbnailHeight); me.fileCount++; if (me.fileNumLimit == me.fileCount) { $($('._picker', $(me._uploader))[0]).css("display", "none"); } }); // 文件上传过程中创建进度条实时显示。 bindedObj.on('uploadProgress', function (file, percentage) { var $li = $('#' + $(me._uploader).attr("id") + "_" + file.id), $percent = $li.find('.progress span'); // 避免重复创建 if (!$percent.length) { $percent = $(' ') .appendTo($li) .find('span'); } $percent.css('width', percentage * 100 + '%'); }); // 文件上传成功，给item添加成功class, 用样式标记上传成功。 bindedObj.on('uploadSuccess', function (file, response) { $('#' + $(me._uploader).attr("id") + "_" + file.id).addClass('upload-state-done'); bindedObj.makeThumb(file, function (error, src) { $img = $('#thumb_' + $(me._uploader).attr("id") + "_" + file.id); if (error) { $img.replaceWith('不能预览'); return; } $img.attr('src', src); }, me.thumbnailWidth, me.thumbnailHeight); if ('function' == typeof me.custsuccess) { me.custsuccess(file, response); } }); // 文件上传失败，显示上传出错。 bindedObj.on('uploadError', function (file, reason) { var $li = $('#' + $(me._uploader).attr("id") + "_" + file.id), $error = $li.find('div.error'); // 避免重复创建 if (!$error.length) { $error = $('').appendTo($li); } $error.text('上传失败,' + reason); }); // 其他错误 bindedObj.on('error', function (type) { console.log("webuploadertool error type:" + type); var message = ""; if ("Q_EXCEED_NUM_LIMIT" == type) { message = "最多只允许上传" + me.fileNumLimit + "张图片"; } else if ("F_EXCEED_SIZE" == type) { message = "单张只允许上传" + me.fileSingleSizeLimit + "M以内的图片"; } else if ("Q_TYPE_DENIED" == type) { message = "只允许上传类型为" + me.imageExtensions + "的图片"; } if ('function' == typeof me.custerror) { me.custerror(message); } }); // 完成上传完了，成功或者失败 bindedObj.on('uploadComplete', function (file) { $('#' + $(me._uploader).attr("id") + "_" + file.id).find('.progress').remove(); }); } }; window.$WebUpload = $WebUpload; }());

webuploader可复用多实例代码参考

猜你喜欢