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