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()
        });
    }