WebUploader 上传图片回显

/*
fileMaxCount 最大文件数
buttonText 按钮文本
multiple 是否多选
*/
(function ($) {
    $.fn.extend({
        uploadImg: function (opt) {
            var webUploader;
            //可行性判断
            if (!WebUploader.Uploader.support()) {
                alert('Web Uploader 不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器');
                throw new Error('WebUploader does not support the browser you are using.');
            }
            if (typeof opt != "object") {
                alert('参数错误!');
                return;
            }
            (function (opt, $uploaderDiv) {
                // 可能有pedding, ready, uploading, confirm, done.
                var state = 'pedding',
                    // 添加的文件数量
                    fileCount = 0,
                    // 优化retina, 在retina下这个值是2
                    //ratio = window.devicePixelRatio || 1,
                    // 缩略图大小
                    thumbnailWidth = 700,
                    thumbnailHeight = 700,
                    // 判断浏览器是否支持图片的base64
                    isSupportBase64 = (function () {
                        var data = new Image();
                        var support = true;
                        data.onload = data.onerror = function () {
                            if (this.width != 1 || this.height != 1) {
                                support = false;
                            }
                        }
                        data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
                        return support;
                    })(),

                    // $uploaderDiv = $(this),
                    $uploaderDivId = $uploaderDiv.attr('id'),

                    //图片容器
                    $queue = $uploaderDiv.find('ul.filelist').length > 0 ? $("ul.filelist") : $('<ul class="filelist"></ul>').appendTo($uploaderDiv),

                    //拖拽区域
                    $dndDiv = $('<div id="dndArea_' + $uploaderDivId + '" class="placeholder">').appendTo($uploaderDiv),
                    $dndDivId = $dndDiv.attr('id'),

                    //点选区域
                    $pickerDiv = $(' <div id="filePicker_' + $uploaderDivId + '"></div>').appendTo($dndDiv),
                    $pickerDivId = $pickerDiv.attr('id');

                //迭代出默认配置
                $.each(getOption('#' + $uploaderDivId), function (key, value) {
                    opt[key] = opt[key] || value;
                });

                opt = $.extend(true, {}, opt, {
                    dnd: '#' + $dndDivId,
                    paste: '#' + $uploaderDivId,
                    //按钮容器;
                    pick: {
                        id: '#' + $pickerDivId,
                        label: '<i class="fa icon-create"></i><p class="filePickerText"><span>添加图片</span><br/>（最多' + (opt.fileMaxCount ? opt.fileMaxCount : opt['fileNumLimit']) + '张）</p>',
                        multiple: true
                    },
                });
                if (opt.buttonText) {
                    opt['pick']['label'] = opt.buttonText;
                    delete opt.buttonText;
                }
                if (!opt.multiple) {
                    opt['pick']['multiple'] = opt.multiple;
                    delete opt.multiple;
                }
                if (opt.fileMaxCount) {
                    opt['fileNumLimit'] = opt.fileMaxCount;
                    delete opt.fileMaxCount;
                }
                webUploader = WebUploader.create(opt);
                //if (!WebUploader.Uploader.support()) {
                //    alert(' 上传组件不支持您的浏览器！');
                //    return false;
                //}
                //绑定文件加入队列事件;
                webUploader.on('fileQueued', function (file) {
                    if (fileCount == opt.fileNumLimit) {
                        return NotifyDanger('上传文件数量超过限制!');
                    }
                    fileCount++;
                    addFile(file);
                    if (opt.fileNumLimit === fileCount) {
                        setState('ready');
                    }
                });
                webUploader.on('fileDequeued', function (file) {
                    fileCount--;
                    if (!fileCount || fileCount < opt.fileNumLimit) {
                        setState('pedding');
                    }

                    removeFile(file);

                });
                // 拖拽时不接受 js, txt 文件。
                webUploader.on('dndAccept', function (items) {
                    var denied = false,
                        len = items.length,
                        i = 0,
                        // 修改js类型
                        unAllowed = 'text/plain;application/javascript ';

                    for (; i < len; i++) {
                        // 如果在列表里面
                        if (~unAllowed.indexOf(items[i].type)) {
                            denied = true;
                            break;
                        }
                    }

                    return !denied;
                });
                //选择文件错误触发事件;
                webUploader.on('error', function (code) {
                    var text = '';
                    switch (code) {
                        case 'F_DUPLICATE': text = '该文件已经被选择了!';
                            break;
                        case 'Q_EXCEED_NUM_LIMIT': text = '上传文件数量超过限制!';
                            break;
                        case 'F_EXCEED_SIZE': text = '文件大小不能超过1M!';
                            break;
                        case 'Q_EXCEED_SIZE_LIMIT': text = '所有文件总大小超过限制!';
                            break;
                        case 'Q_TYPE_DENIED': text = '文件类型不正确或者是空文件!';
                            break;
                        default: text = '未知错误!';
                            break;
                    }
                    NotifyDanger(text);
                });
                webUploader.on('all', function (type) {
                    switch (type) {
                        case 'uploadFinished':
                            setState('confirm');
                            break;
                        case 'startUpload':
                            setState('uploading');
                            break;
                        case 'stopUpload':
                            setState('paused');
                            break;

                    }
                })
                function setState(val) {
                    if (val === state) {
                        return;
                    }
                    state = val;

                    switch (state) {
                        case 'pedding':
                            $dndDiv.removeClass('element-invisible');
                            //$queue.hide();
                            webUploader.refresh();
                            break;
                        case 'ready':
                            $dndDiv.addClass('element-invisible');
                            //$queue.show();
                            webUploader.refresh();
                            break;
                    }
                }
                // 当有文件添加进来时执行，负责view的创建
                function addFile(file) {
                    var $li = $('<li id="' + file.id + '">' +
                        //'<p class="title">' + file.name + '</p>' +
                        '<a href="" class="linkA" data-fancybox="group" data-caption=""><p class="imgWrap"></p></a>' +
                        //'<p class="progress"><span></span></p>' +
                        '</li>'),

                        $btns = $('<div class="file-panel">' +
                            '<span class="cancel">删除</span></div>').appendTo($li),
                        $prgress = $li.find('p.progress span'),
                        $wrap = $li.find('p.imgWrap'),
                        $info = $('<p class="error"></p>'),
                        $link = $li.find('a.linkA');

                    showError = function (code) {
                        switch (code) {
                            case 'exceed_size':
                                text = '文件大小超出';
                                break;

                            case 'interrupt':
                                text = '上传暂停';
                                break;

                            default:
                                text = '上传失败，请重试';
                                break;
                        }

                        $info.text(text).appendTo($li);
                    };

                    if (file.getStatus() === 'invalid') {
                        showError(file.statusText);
                    } else {
                        // @todo lazyload
                        $wrap.text('预览中');
                        webUploader.makeThumb(file, function (error, src) {
                            if (error) {
                                $wrap.text('不能预览');
                                return;
                            }

                            if (isSupportBase64) {
                                var img = $('<img src="' + src + '">');
                                $wrap.empty().append(img);
                                $link.attr('href', src);
                            } else {
                                $wrap.text("预览出错");
                            }
                        }, thumbnailWidth, thumbnailHeight);
                    }

                    file.on('statuschange', function (cur, prev) {
                        if (prev === 'progress') {
                            $prgress.hide().width(0);
                        } else if (prev === 'queued') {
                            $li.off('mouseenter mouseleave');
                            $btns.remove();
                        }

                        // 成功
                        if (cur === 'error' || cur === 'invalid') {
                            console.log(file.statusText);
                            showError(file.statusText);
                        } else if (cur === 'interrupt') {
                            showError('interrupt');
                        } else if (cur === 'queued') {
                        } else if (cur === 'progress') {
                            $info.remove();
                            $prgress.css('display', 'block');
                        } else if (cur === 'complete') {
                            $li.append('<span class="success"></span>');
                        }

                        $li.removeClass('state-' + prev).addClass('state-' + cur);
                    });

                    $li.on('mouseenter', function () {
                        $btns.stop().animate({ height: 30 });
                    });

                    $li.on('mouseleave', function () {
                        $btns.stop().animate({ height: 0 });
                    });

                    $btns.on('click', 'span', function () {
                        webUploader.removeFile(file);

                        //if (supportTransition) {
                        //    deg = 'rotate(' + file.rotation + 'deg)';
                        //    $wrap.css({
                        //        '-webkit-transform': deg,
                        //        '-mos-transform': deg,
                        //        '-o-transform': deg,
                        //        'transform': deg
                        //    });
                        //} else {
                        //    $wrap.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + (~~((file.rotation / 90) % 4 + 4) % 4) + ')');
                        //    // use jquery animate to rotation
                        //    // $({
                        //    //     rotation: rotation
                        //    // }).animate({
                        //    //     rotation: file.rotation
                        //    // }, {
                        //    //     easing: 'linear',
                        //    //     step: function( now ) {
                        //    //         now = now * Math.PI / 180;

                        //    //         var cos = Math.cos( now ),
                        //    //             sin = Math.sin( now );

                        //    //         $wrap.css( 'filter', "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod='auto expand')");
                        //    //     }
                        //    // });
                        //}

                    });

                    $li.appendTo($queue);
                }
                // 负责view的销毁
                function removeFile(file) {
                    var $li = $('#' + file.id);
                    $li.remove();
                }
            })(opt, $(this))

　　　　　　　//以下是图片回显的重点内容：先将图片转成File类型，然后通过addFiles把图片添加到队列。参考：https://segmentfault.com/q/1010000007428390
            var pictureObj = new Object();
            pictureObj.getPictures = function (opt) {
                if (opt.pictures) {
                    //convertBase64UrlToBlob
                    var getFileBlob = function (url, cb) {
                        var bytes = window.atob(url);        //去掉url的头，并转换为byte  

                        //处理异常,将ascii码小于0的转换为大于0
                        var ab = new ArrayBuffer(bytes.length);
                        var ia = new Uint8Array(ab);
                        for (var i = 0; i < bytes.length; i++) {
                            ia[i] = bytes.charCodeAt(i);
                        }

                        cb(new Blob([ab], { type: 'image/jpeg' }));
                    };

                    var blobToFile = function (blob, name) {
                        blob.lastModifiedDate = new Date();
                        blob.name = name;
                        return blob;
                    };

                    var getFileObject = function (filePathOrUrl, cb) {
                        getFileBlob(filePathOrUrl, function (blob) {
                            cb(blobToFile(blob, 'test.jpg'));
                        });
                    };
                    var pictures = opt.pictures.split(',');
                    $.each(pictures, function (index, item) {
                        getFileObject(item, function (fileObject) {
                            var wuFile = new WebUploader.Lib.File(WebUploader.guid('rt_'), fileObject);
                            var file = new WebUploader.File(wuFile);
                            webUploader.addFiles(file)
                        })
                    })
                }
            }
            return pictureObj;
        }
    })
})(jQuery)

//Web Uploader默认配置;
function getOption(objId) {
    /*
    *    配置文件同webUploader一致,这里只给出默认配置.
    *    具体参照:http://fex.baidu.com/webuploader/doc/index.html
    */
    return {
        //按钮容器;
        pick: {
            id: objId,
            label: '<i class="fa icon- create"></i><p class="filePickerText"><span>点击添加图片</span></p>',//'<i class="fa icon-create"></i><p class="filePickerText"><span>添加图片</span><br/>（最多20张）</p>',
            multiple: true
        },
        //类型限制;
        //accept: {
        //    title: "Images",
        //    extensions: "gif,jpg,jpeg,bmp,png,ico",
        //    mimeTypes: "image/*"
        //},
        //配置生成缩略图的选项
        thumb: {
            width: 170,
            height: 150,
            // 图片质量，只有type为`image/jpeg`的时候才有效。
            quality: 70,
            // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
            allowMagnify: false,
            // 是否允许裁剪。
            crop: false,
            // 为空的话则保留原有图片格式。
            // 否则强制转换成指定的类型。
            type: "image/jpeg"
        },
        //文件上传方式
        method: "POST",
  tyty      //fh;
       tguty server: "",
        //是否已二进制的流的方式发送文件，这样整个上传内容php://input都为文件内容
        sendAsBinary: false,
        // 开起分片上传。 thinkphp的上传类测试分片无效,图片丢失;
        chunked: true,
        // 分片大小
        chunkSize: 512 * 1024,
        //最大上传的文件数量, 总文件大小,单个文件大小(单位字节);
        fileNumLimit: 50,
        fileSizeLimit: 10240 * 1024,
        fileSingleSizeLimit: 1024 * 1024,
    };
}

////实例化Web Uploader
//function getUploader(opt) {
//    return new WebUploader.Uploader(opt);
//

前台调用方式：

 this.init_uploader_picture = function () { //实例化并绑定药品图片
        $('#uploader_picture').uploadImg({
            fileMaxCount: 1,
            multiple: false,
            //pictures: self.form.picture()
        }).getPictures({
            pictures: self.form.picture()
        });
    }

方式二：

/*
fileMaxCount 最大文件数
buttonText 按钮文本
multiple 是否多选
pictures base64图片，以逗号隔开
*/
(function ($) {
    $.fn.extend({
        diyUpload: function (opt) {
            //可行性判断
            if (!WebUploader.Uploader.support()) {
                alert('Web Uploader 不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器');
                throw new Error('WebUploader does not support the browser you are using.');
            }

            if (typeof opt != "object") {
                alert('参数错误!');
                return;
            }

            (function (opt, $uploaderDiv) {

                // 可能有pedding, ready, uploading, confirm, done.
                var state = 'pedding',

                    // 添加的文件数量
                    fileCount = 0,

                    // 优化retina, 在retina下这个值是2
                    //ratio = window.devicePixelRatio || 1,

                    // 缩略图大小
                    thumbnailWidth = 700,
                    thumbnailHeight = 700,

                    // 判断浏览器是否支持图片的base64
                    isSupportBase64 = (function () {
                        var data = new Image();
                        var support = true;
                        data.onload = data.onerror = function () {
                            if (this.width != 1 || this.height != 1) {
                                support = false;
                            }
                        }
                        data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
                        return support;
                    })(),

                    // $uploaderDiv = $(this),
                    $uploaderDivId = $uploaderDiv.attr('id'),

                    //图片容器
                    $queue = $uploaderDiv.find('ul.filelist').length > 0 ? $("ul.filelist") : $('<ul class="filelist"></ul>').appendTo($uploaderDiv),

                    //拖拽区域
                    $dndDiv = $('<div id="dndArea_' + $uploaderDivId + '" class="placeholder">').appendTo($uploaderDiv),
                    $dndDivId = $dndDiv.attr('id'),

                    //点选区域
                    $pickerDiv = $(' <div id="filePicker_' + $uploaderDivId + '"></div>').appendTo($dndDiv),
                    $pickerDivId = $pickerDiv.attr('id');

                //迭代出默认配置
                $.each(getOption('#' + $uploaderDivId), function (key, value) {
                    opt[key] = opt[key] || value;
                });

                opt = $.extend(true, {}, opt, {
                    dnd: '#' + $dndDivId,
                    paste: '#' + $uploaderDivId,
                    //按钮容器;
                    pick: {
                        id: '#' + $pickerDivId,
                        label: '<i class="fa icon-create"></i><p class="filePickerText"><span>添加图片</span><br/>（最多' + (opt.fileMaxCount ? opt.fileMaxCount : opt['fileNumLimit']) + '张）</p>',
                        multiple: true
                    },
                });
                if (opt.buttonText) {
                    opt['pick']['label'] = opt.buttonText;
                    delete opt.buttonText;
                }
                if (opt.multiple) {
                    opt['pick']['multiple'] = opt.multiple;
                    delete opt.multiple;
                }
                if (opt.fileMaxCount) {
                    opt['fileNumLimit'] = opt.fileMaxCount;
                    delete opt.fileMaxCount;
                }
　　　　　　　　　//图片回显的另一种方式
　　　　　　　　  if (opt.pictures) {
                    var pictures = opt.pictures.split(',');

                    for (var i = 0; i < pictures.length; i++) {
                        fileCount++;
                        (function () {
                            //加载原来的图片
                            var href = "data:image/jpeg;base64," + pictures[i],
                                $li = $('<li id="PIC_WU_FILE_' + i.toString() + '">\
                                    <a href="' + href + '" class="linkA" data-fancybox="group" data-caption=""><p class="imgWrap"><img src="' + href + '"/></p></a>\
                                </li>'),
                                $btns = $('<div class="file-panel">\
                                        <span class="cancel">删除</span>\
                                   </div>').appendTo($li);

                            $li.appendTo($queue);

                            $li.on('mouseenter', function () {
                                $btns.stop().animate({ height: 30 });
                            });

                            $li.on('mouseleave', function () {
                                $btns.stop().animate({ height: 0 });
                            });
                            $btns.on('click', 'span', function () {
                                $(this).parent().parent().remove();
                                fileCount--;
                                if (!fileCount || fileCount < opt.fileNumLimit) {
                                    $dndDiv.removeClass('element-invisible');
                                }
                            });
                        })(i)
                    }

                    //上传照片数量等于限制数量时，隐藏上传按钮
                    if (pictures.length > 0 && opt.fileNumLimit && opt.fileNumLimit == fileCount) {
                        $dndDiv.addClass('element-invisible');
                    }
                    //重新设置限制文件个数参数
                    if (fileCount > 0) {
                        opt['fileNumLimit'] = opt.fileNumLimit - fileCount;
                        fileCount = 0;
                    }
                }

                var webUploader = WebUploader.create(opt);

                //if (!WebUploader.Uploader.support()) {
                //    alert(' 上传组件不支持您的浏览器！');
                //    return false;
                //}

                //绑定文件加入队列事件;
                webUploader.on('fileQueued', function (file) {
                    fileCount++;

                    addFile(file);
                    if (opt.fileNumLimit === fileCount) {
                        setState('ready');
                    }
                });
                webUploader.on('fileDequeued', function (file) {
                    fileCount--;
                    if (!fileCount || fileCount < opt.fileNumLimit) {
                        setState('pedding');
                    }

                    removeFile(file);

                });
                // 拖拽时不接受 js, txt 文件。
                webUploader.on('dndAccept', function (items) {
                    var denied = false,
                        len = items.length,
                        i = 0,
                        // 修改js类型
                        unAllowed = 'text/plain;application/javascript ';

                    for (; i < len; i++) {
                        // 如果在列表里面
                        if (~unAllowed.indexOf(items[i].type)) {
                            denied = true;
                            break;
                        }
                    }

                    return !denied;
                });
                //选择文件错误触发事件;
                webUploader.on('error', function (code) {
                    var text = '';
                    switch (code) {
                        case 'F_DUPLICATE': text = '该文件已经被选择了!';
                            break;
                        case 'Q_EXCEED_NUM_LIMIT': text = '上传文件数量超过限制!';
                            break;
                        case 'F_EXCEED_SIZE': text = '文件大小不能超过1M!';
                            break;
                        case 'Q_EXCEED_SIZE_LIMIT': text = '所有文件总大小超过限制!';
                            break;
                        case 'Q_TYPE_DENIED': text = '文件类型不正确或者是空文件!';
                            break;
                        default: text = '未知错误!';
                            break;
                    }
                    NotifyDanger(text);
                    //alert(text);
                });
                webUploader.on('all', function (type) {
                    switch (type) {
                        case 'uploadFinished':
                            setState('confirm');
                            break;
                        case 'startUpload':
                            setState('uploading');
                            break;
                        case 'stopUpload':
                            setState('paused');
                            break;

                    }
                })
                function setState(val) {
                    if (val === state) {
                        return;
                    }
                    state = val;

                    switch (state) {
                        case 'pedding':
                            $dndDiv.removeClass('element-invisible');
                            //$queue.hide();
                            webUploader.refresh();
                            break;
                        case 'ready':
                            $dndDiv.addClass('element-invisible');
                            //$queue.show();
                            webUploader.refresh();
                            break;
                    }
                }
                // 当有文件添加进来时执行，负责view的创建
                function addFile(file) {
                    var $li = $('<li id="' + file.id + '">' +
                        //'<p class="title">' + file.name + '</p>' +
                        '<a href="" class="linkA" data-fancybox="group" data-caption=""><p class="imgWrap"></p></a>' +
                        //'<p class="progress"><span></span></p>' +
                        '</li>'),

                        $btns = $('<div class="file-panel">' +
                            '<span class="cancel">删除</span></div>').appendTo($li),
                        $prgress = $li.find('p.progress span'),
                        $wrap = $li.find('p.imgWrap'),
                        $info = $('<p class="error"></p>'),
                        $link = $li.find('a.linkA');

                        showError = function (code) {
                            switch (code) {
                                case 'exceed_size':
                                    text = '文件大小超出';
                                    break;

                                case 'interrupt':
                                    text = '上传暂停';
                                    break;

                                default:
                                    text = '上传失败，请重试';
                                    break;
                            }

                            $info.text(text).appendTo($li);
                        };

                    if (file.getStatus() === 'invalid') {
                        showError(file.statusText);
                    } else {
                        // @todo lazyload
                        $wrap.text('预览中');
                        webUploader.makeThumb(file, function (error, src) {
                            if (error) {
                                $wrap.text('不能预览');
                                return;
                            }

                            if (isSupportBase64) {
                                var img = $('<img src="' + src + '">');
                                $wrap.empty().append(img);
                                $link.attr('href', src);
                            } else {
                                $wrap.text("预览出错");
                            }
                        }, thumbnailWidth, thumbnailHeight);
                    }

                    file.on('statuschange', function (cur, prev) {
                        if (prev === 'progress') {
                            $prgress.hide().width(0);
                        } else if (prev === 'queued') {
                            $li.off('mouseenter mouseleave');
                            $btns.remove();
                        }

                        // 成功
                        if (cur === 'error' || cur === 'invalid') {
                            console.log(file.statusText);
                            showError(file.statusText);
                        } else if (cur === 'interrupt') {
                            showError('interrupt');
                        } else if (cur === 'queued') {
                        } else if (cur === 'progress') {
                            $info.remove();
                            $prgress.css('display', 'block');
                        } else if (cur === 'complete') {
                            $li.append('<span class="success"></span>');
                        }

                        $li.removeClass('state-' + prev).addClass('state-' + cur);
                    });

                    $li.on('mouseenter', function () {
                        $btns.stop().animate({ height: 30 });
                    });

                    $li.on('mouseleave', function () {
                        $btns.stop().animate({ height: 0 });
                    });

                    $btns.on('click', 'span', function () {
                        webUploader.removeFile(file);

                        //if (supportTransition) {
                        //    deg = 'rotate(' + file.rotation + 'deg)';
                        //    $wrap.css({
                        //        '-webkit-transform': deg,
                        //        '-mos-transform': deg,
                        //        '-o-transform': deg,
                        //        'transform': deg
                        //    });
                        //} else {
                        //    $wrap.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + (~~((file.rotation / 90) % 4 + 4) % 4) + ')');
                        //    // use jquery animate to rotation
                        //    // $({
                        //    //     rotation: rotation
                        //    // }).animate({
                        //    //     rotation: file.rotation
                        //    // }, {
                        //    //     easing: 'linear',
                        //    //     step: function( now ) {
                        //    //         now = now * Math.PI / 180;

                        //    //         var cos = Math.cos( now ),
                        //    //             sin = Math.sin( now );

                        //    //         $wrap.css( 'filter', "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod='auto expand')");
                        //    //     }
                        //    // });
                        //}

                    });

                    $li.appendTo($queue);
                }
                // 负责view的销毁
                function removeFile(file) {
                    var $li = $('#' + file.id);
                    $li.remove();
                }
            })(opt, $(this))
        }
    })
})(jQuery)

//Web Uploader默认配置;
function getOption(objId) {
    /*
    *    配置文件同webUploader一致,这里只给出默认配置.
    *    具体参照:http://fex.baidu.com/webuploader/doc/index.html
    */
    return {
        //按钮容器;
        pick: {
            id: objId,
            label: '<i class="fa icon- create"></i><p class="filePickerText"><span>点击添加图片</span></p>',//'<i class="fa icon-create"></i><p class="filePickerText"><span>添加图片</span><br/>（最多20张）</p>',
            multiple: true
        },
        //类型限制;
        //accept: {
        //    title: "Images",
        //    extensions: "gif,jpg,jpeg,bmp,png,ico",
        //    mimeTypes: "image/*"
        //},
        //配置生成缩略图的选项
        thumb: {
            width: 170,
            height: 150,
            // 图片质量，只有type为`image/jpeg`的时候才有效。
            quality: 70,
            // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
            allowMagnify: false,
            // 是否允许裁剪。
            crop: false,
            // 为空的话则保留原有图片格式。
            // 否则强制转换成指定的类型。
            type: "image/jpeg"
        },
        //文件上传方式
        method: "POST",
        //服务器地址;
        server: "",
        //是否已二进制的流的方式发送文件，这样整个上传内容php://input都为文件内容
        sendAsBinary: false,
        // 开起分片上传。 thinkphp的上传类测试分片无效,图片丢失;
        chunked: true,
        // 分片大小
        chunkSize: 512 * 1024,
        //最大上传的文件数量, 总文件大小,单个文件大小(单位字节);
        fileNumLimit: 50,
        fileSizeLimit: 10240 * 1024,
        fileSingleSizeLimit: 1024 * 1024,
    };
}

////实例化Web Uploader
//function getUploader(opt) {
//    return new WebUploader.Uploader(opt);
//}

前台调用方式：

 this.init_uploader_picture = function () { //实例化并绑定药品图片
        $('#uploader_picture').uploadImg({
            fileMaxCount: 1,
            multiple: false,
            pictures: self.form.picture()
        });
    }