/*
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,// 判断浏览器是否支持图片的base64isSupportBase64 = (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/1010000007428390var pictureObj = new Object();pictureObj.getPictures = function (opt) {if (opt.pictures) {//convertBase64UrlToBlobvar 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,// 判断浏览器是否支持图片的base64isSupportBase64 = (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()});}