/**
* 对百度WebUploader的封装
* 因为这里考虑到每个需求可能不一样，比如文件大小限制，文件格式限制，宽高等，还是没法做成共通的插件
* 所以这些基本参数需要调用者自己定义，这里对回调进行了封装，调用者无需关心处理回调
*/
(function () {
// 判断ie有没有安装flash播放器
function IEVersion() {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE浏览器
if (isIE) {
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if (fIEVersion == 7 || fIEVersion == 8 || fIEVersion == 9) {
var hasFlash = false;
try {
hasFlash = Boolean(new ActiveXObject('ShockwaveFlash.ShockwaveFlash'));
} catch (exception) {
hasFlash = ('undefined' != typeof navigator.mimeTypes['application/x-shockwave-flash']);
var r = confirm("您的浏览器不支持上传文件，请安装flash播放器");
if (r == true) {
window.open("https://get.adobe.com/tw/flashplayer/");
}
else {
}
}
}
}
};
/**
* 图片
* @param options
*/
var $WebUploadPicture = function (options) {
this.auto = options.auto || true; //开启自动上传
this.uploadBtnId = options.uploadBtnId || '#filePicker'; //选择图片按钮，id|class自己定义
this.uploadPreId = options.picturePreId || 'fileListPre'; //图片预览ID
this.uploadUrl = options.serverUrl || pagePath + '/upload/images'; //上传URL
this.swf = pagePath + '/h-ui/lib/webuploader/0.1.5/Uploader.swf';
this.pictureUrl = options.hiddenPictureUrl || 'fileDown.file_id'; //隐藏域name,用于往后台传值
this.picWidth = options.width; //图片宽度
this.picHeight = options.height; //图片高度
this.fileSizeLimit = 300 * 1024 * 1024; //验证文件总大小是否超出限制, 超出则不允许加入队列
this.fileSingleSizeLimit = 300 * 1024 * 1024; // 验证单个文件大小是否超出限制, 超出则不允许加入队列
//this.fileSizeLimit = options.fileSizeLimit || 100 * 1024 * 1024; //验证文件总大小是否超出限制, 超出则不允许加入队列
//this.fileSingleSizeLimit = options.fileSingleSizeLimit || 100 * 1024 * 1024; // 验证单个文件大小是否超出限制, 超出则不允许加入队列
this.fileNumLimit = options.fileNumLimit || undefined; // 验证文件总数量, 超出则不允许加入队列
this.accept = options.accept; //指定接受哪些类型的文件
this.append = options.append || false; //是否开启追加多个图片
this.uploadBarId = null; //图片上传的进度条的id
};
var
// 优化retina, 在retina下这个值是2
ratio = window.devicePixelRatio || 1,
// 缩略图大小
thumbnailWidth = 100 * ratio,
thumbnailHeight = 100 * ratio;
$WebUploadPicture.prototype = {
/**
* 初始化webUploader
*/
init: function () {
// 判断ie有没有安装flash播放器
IEVersion();
var uploader = this.create();
this.bindEvent(uploader);
return uploader;
},
/**
* 创建webuploader对象
*/
create: function () {
return WebUploader.create({
auto: this.auto,
pick: {
id: this.uploadBtnId,
multiple: true // 只上传一个
},
accept: this.accept,
swf: this.swf,
disableGlobalDnd: true,
duplicate: true,
server: this.uploadUrl,
fileSizeLimit: this.fileSizeLimit,
fileSingleSizeLimit: this.fileSingleSizeLimit,
fileNumLimit: this.fileNumLimit
});
},
/**
* 绑定事件
*/
bindEvent: function (bindObj) {
var me = this;
//当文件被加入队列以后触发
//当文件被加入队列以后触发
bindObj.on('fileQueued', function (file) {
var $li = $(
'' +
'
![]()
' +
'
' +
'
删除' +
'
' + file.name + '
' +
'
')
.appendTo($li)
.find('span');
}
$percent.css('width', percentage * 100 + '%');
});
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
bindObj.on('uploadSuccess', function (file, response) {
succeedMessage("上传成功");
//隐藏域ID,用于往后台传值
$("#" + file.id + "PicUrl").val(response);
$('#' + file.id).addClass('upload-state-done');
picSuccess = true;
});
// 完成上传完了，成功或者失败，先删除进度条。
bindObj.on('uploadComplete', function (file) {
$('#' + file.id).find('.progress').remove();
});
// 文件上传失败，显示上传出错。
bindObj.on('uploadError', function (file, response) {
//errorMessage(response);
errorMessage('上传出错');
var $li = $('#' + file.id),
$error = $li.find('div.error');
// 避免重复创建
if (!$error.length) {
$error = $('').appendTo($li);
}
$error.text('上传失败');
//移除上传失败的隐藏域input值
$('#' + file.id + 'PicUrl').remove();
});
// 其他错误
bindObj.on('error', function (type) {
if ("Q_EXCEED_SIZE_LIMIT" == type) {
errorMessage("文件大小超出了限制");
} else if ("Q_TYPE_DENIED" == type) {
errorMessage("文件类型不满足");
} else if ("Q_EXCEED_NUM_LIMIT" == type) {
errorMessage("上传数量超过限制");
} else if ("F_DUPLICATE" == type) {
errorMessage("图片选择重复");
} else if ("F_EXCEED_SIZE" == type) {
errorMessage("文件大小超出了限制");
} else {
errorMessage("上传过程中出错");
}
});
},
/**
* 设置图片上传的进度条的id
*/
setUploadBarId: function (id) {
this.uploadBarId = id;
}
};
/**
* 文件
* @param options
*/
var $WebUploadDoc = function (options) {
this.auto = options.auto || true; //开启自动上传
this.uploadBtnId = options.uploadBtnId || '#filePicker'; //选择上传按钮，id|class自己定义
this.uploadPreId = options.docPreId || 'fileListPre'; //预览ID
this.uploadUrl = options.serverUrl || pagePath + '/upload/docs'; //上传URL
this.swf = pagePath + '/h-ui/lib/webuploader/0.1.5/Uploader.swf';
this.docUrl = options.hiddenDocUrl || 'fileDown.file_id'; //隐藏域name,用于往后台传值
this.fileSizeLimit = 1024 * 1024 * 1024 * 5; //验证文件总大小是否超出限制, 超出则不允许加入队列
this.fileSingleSizeLimit = 1024 * 1024 * 1024 * 5; // 验证单个文件大小是否超出限制, 超出则不允许加入队列
//this.fileSizeLimit = options.fileSizeLimit || 100 * 1024 * 1024; //验证文件总大小是否超出限制, 超出则不允许加入队列
//this.fileSingleSizeLimit = options.fileSingleSizeLimit || 2 * 1024 * 1024; // 验证单个文件大小是否超出限制, 超出则不允许加入队列
this.fileNumLimit = options.fileNumLimit || undefined; // 验证文件总数量, 超出则不允许加入队列
this.accept = options.accept; //指定接受哪些类型的文件
this.append = options.append || false; //是否开启追加多个
this.uploadBarId = null; //上传的进度条的id
};
$WebUploadDoc.prototype = {
/**
* 初始化webUploader
*/
init: function () {
IEVersion();
var uploader = this.create();
this.bindEvent(uploader);
return uploader;
},
/**
* 创建webuploader对象
*/
create: function () {
return WebUploader.create({
auto: this.auto,
pick: {
id: this.uploadBtnId,
multiple: false // 只上传一个
},
accept: this.accept,
swf: this.swf,
disableGlobalDnd: true,
duplicate: true,
server: this.uploadUrl,
fileSizeLimit: this.fileSizeLimit,
fileSingleSizeLimit: this.fileSingleSizeLimit,
fileNumLimit: this.fileNumLimit
});
},
/**
* 绑定事件
*/
bindEvent: function (bindObj) {
var me = this;
//当文件被加入队列以后触发
bindObj.on('fileQueued', function (file) {
var $li = $(
'' +
'
' + file.name + '
' +
'
' +
'
删除' +
'
等待上传...
' +
'
' +
'
' + file.name + '
' +
'
' +
'
删除' +
'
等待上传...
' +
'
'
str += ' | ';
str += '' + file.name + ' | ';
str += '删除 | ';
str += '
'
/*if (me.append) {
$("#uploadList").append(str);
} else {
$("#uploadList").html(str);
}*/
$("#uploadList").append(str);
file_index++;
});
// 文件上传过程中创建进度条实时显示。
bindObj.on('uploadProgress', function (file, percentage) {
var $div = $('#progress'),
$percent = $div.find('.progress .progress-bar');
// 避免重复创建
if (!$percent.length) {
$percent = $('').appendTo($div).find('.progress-bar');
}
$('#state').text('上传中');
$percent.css('width', percentage * 100 + '%');
if (percentage == 1) {
$('#state').text('上传完成');
}
});
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
bindObj.on('uploadSuccess', function (file, response) {
succeedMessage("上传成功");
//隐藏域ID,用于往后台传值
//$("#" + file.id + "DocUrl").val(response);
//$( '#'+file.id ).find('p.state').text('已上传');
//console.log(file)
//console.log(response)
$("#" + file.id ).val(response);
});
// 完成上传完了，成功或者失败，先删除进度条。
bindObj.on('uploadComplete', function (file) {
// $( '#'+file.id ).find('.progress').fadeOut();
$('#progress').find('.progress').remove();
//$('.state').remove();
});
// 文件上传失败，显示上传出错。
bindObj.on('uploadError', function (file, response) {
//errorMessage(response);
errorMessage('上传出错');
$('#' + file.id).find('p.state').text('上传出错');
//移除上传失败的隐藏域input值
$('#' + file.id + 'DocUrl').remove();
//不显示错误文件
$('#' + file.id).remove();
});
// 其他错误
bindObj.on('error', function (type) {
if ("Q_EXCEED_SIZE_LIMIT" == type) {
errorMessage("文件大小超出了限制");
} else if ("Q_TYPE_DENIED" == type) {
errorMessage("文件类型不满足");
} else if ("Q_EXCEED_NUM_LIMIT" == type) {
errorMessage("上传数量超过限制");
} else if ("F_DUPLICATE" == type) {
errorMessage("文件选择重复");
} else if ("F_EXCEED_SIZE" == type) {
errorMessage("文件大小超出了限制");
} else {
errorMessage("上传过程中出错");
}
});
},
/**
* 设置图片上传的进度条的id
*/
setUploadBarId: function (id) {
this.uploadBarId = id;
}
};
window.$WebUploadDocList = $WebUploadDocList;
window.$WebUploadPicture = $WebUploadPicture;
window.$WebUploadDoc = $WebUploadDoc;
}());
function delDoc(obj) {
var $this = $(obj);
$this.parent("div").remove();
}
function delDocList(obj) {
var $this = $(obj);
$this.parent().parent().remove();
}