根據(jù)需求 修改了webuploader.js中的部分源代碼
!(function(){
var currentDate = new Date();
GUID = currentDate.getHours()
+ "" +currentDate.getMinutes()
+ "" +currentDate.getSeconds()
+ "" +currentDate.getMilliseconds();
//上傳圖片
$.extend({
uploadPicture:function(obj){
// 初始化Web Uploader
var uploader = WebUploader.create({
// 選完文件后,是否自動上傳色徘。
auto: true,
method:'POST',
fileNumLimit:obj.fileNumLimit,//驗證文件總數(shù)量, 超出則不允許加入隊列
fileSingleSizeLimit:obj.fileSingleSizeLimit ,//5*1024*1024,//驗證單個文件大小是否超出限制, 超出則不允許加入隊列
// swf文件路徑
swf: 'Uploader.swf',
// 文件接收服務(wù)端恭金。
server: obj.server,//'/page/page.json',
// 選擇文件的按鈕」硬撸可選横腿。
// 內(nèi)部根據(jù)當(dāng)前運(yùn)行是創(chuàng)建,可能是input元素斤寂,也可能是flash.
pick: obj.pick,//'#filePicker',
// 只允許選擇圖片文件耿焊。
accept: obj.accept,
thumb:{
width: 110,
height: 110,
// 圖片質(zhì)量,只有type為`image/jpeg`的時候才有效遍搞。
quality: 70,
// 是否允許放大罗侯,如果想要生成小圖的時候不失真,此選項應(yīng)該設(shè)置為false.
allowMagnify: true,
// 是否允許裁剪溪猿。
crop: true,
// 為空的話則保留原有圖片格式钩杰。
// 否則強(qiáng)制轉(zhuǎn)換成指定的類型。
type: ''//'image/jpeg'
},
duplicate:true,
compress:false,
resize:obj.resize||false // 不壓縮image, 默認(rèn)如果是jpeg诊县,文件上傳前會壓縮一把再上傳讲弄!
});
//由于每次點擊彈出框時,原有的按鈕都會變大翎冲,在此處新初始化一個按鈕覆蓋掉原有的按鈕
uploader.addButton({
id: '#addPictureButton',
innerHTML: '+'
});
var i = $("#pictureList .info").length;
$(".ui-dialog-title").html("上傳圖片 ("+i+"/12)");
// 當(dāng)有文件添加進(jìn)來的時候
uploader.on( 'fileQueued', function( file ) {
//圖片數(shù)目限制為12張
if($('.file-item').length<12){
//創(chuàng)建新添加圖片和刪除條
var $li = $(
'<div id="' + file.id + '" class="file-item thumbnail">' +
'<img>' +'<span class="delBtn">x</span>'+
'<div class="info"></div>'+
'<input class="imgPath" type="hidden">'+
'</div>'
),
$info = $li.find('.info'),
$img = $li.find('img');
//刪除圖片
var $del= $li.find('.delBtn');
$del.click(function() {
var i = $("#pictureList .info").length-1;
$(".ui-dialog-title").html("上傳圖片 ("+i--+"/12)");
$(this).fadeOut("normal",function(){
$(this).parents('div.file-item').remove();
uploader.removeFile( file );
})
});
}
//將新添加圖片放入縮略圖容器
$('#pictureList').append( $li );
//為圖片刪除條添加單擊刪除事件
$info.on('click', function () {
//將圖片移除上傳序列
uploader.removeFile(file, true);
//將圖片從縮略圖容器刪除
var $li = $('#' + file.id);
$li.off().remove();
$('#filePicker').children().css('display','');
if ($('#filePicker').attr('class') === 'qyfc_upload webuploader-container') {
$('#filePicker').css('background', 'url("images/chooseImg_qyfc.png") 0 0 no-repeat');
} else {
$('#filePicker').css('background', 'url("images/chooseImg_grzp.png") 0 0 no-repeat');
}
});
// 創(chuàng)建縮略圖
// 如果為非圖片文件垂睬,可以不用調(diào)用此方法。
// thumbnailWidth x thumbnailHeight 為 100 x 100
var thumbnailWidth = 100,
thumbnailHeight=100;
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$img.replaceWith('<span>不能預(yù)覽</span>');
return;
}
$img.attr( 'src', src );
}, thumbnailWidth, thumbnailHeight );
});
// 文件上傳過程中創(chuàng)建進(jìn)度條實時顯示。
uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress .progress-bar');
$info = $li.find('.info');
// 避免重復(fù)創(chuàng)建
if ( !$percent.length ) {
$percent = $('<div class="progress"><div id="progress-bar" class="progress-bar progress-info"></span></div>')
.appendTo( $li )
.find('.progress-bar');
}
$info.css({display: 'none'});
$percent.css( 'width', percentage * 100 + '%' );
});
// 文件上傳成功驹饺,給item添加成功class, 用樣式標(biāo)記上傳成功钳枕。
uploader.on( 'uploadSuccess', function( file ,response) {
var $li = $('#' + file.id), $info = $li.find('.info');
for(var i=0;i<$("#pictureList .info").length+1;i++){
$(".ui-dialog-title").html("上傳圖片 ("+i+"/12)");
}
var $input = $li.find('.imgPath');
$li.off();
$info.off().text('上傳成功!').css({color: 'green', display: 'block',textAlign:'center',paddingTop:'10px'});
$input.off().val(response.imgPath);
if(obj.success){
obj.success.call(this,file,response);
return ;
}
//$( '#'+file.id ).addClass('upload-state-done');
$('input[name="'+obj.inputName+'"]').val(response.imgPath);
console.log(response.webUrl);
$("#logourl").val(response.webUrl);
$( '#'+file.id ).addClass('upload-state-done');
});
// // 文件上傳失敗,顯示上傳出錯赏壹。
// uploader.on( 'uploadError', function( file ) {
// var $li = $('#' + file.id),
// $info = $li.find('.info');
// $info.off().text('上傳失敗!').css({color: 'red', display: 'block'});
// });
// 文件上傳失敗鱼炒,顯示上傳出錯。
uploader.on( 'error', function( type,handler ) {
if(!we.utils.isEmpty(obj.error)){
obj.error.call(this,type,handler);
}
var message="文件上傳失敗";
if(type=="Q_TYPE_DENIED"){
message="只允許上傳"+obj.accept.extensions+"格式的文件 "
}else if(type=="F_EXCEED_SIZE"){
message="文件大小不允許超過"+WebUploader.Base.formatSize( obj.fileSingleSizeLimit )
}else if (type == "Q_EXCEED_NUM_LIMIT"){
message="最多只允許上傳" + obj.fileNumLimit + "張圖片蝌借!";
}else if (type=="F_DUPLICATE"){
return ;
}
$dialog.alert({
type:'warning',
title:'溫馨提示',
content:message
});
});
// 完成上傳完了昔瞧,成功或者失敗,先刪除進(jìn)度條菩佑。
uploader.on( 'uploadComplete', function( file ) {
$( '#'+file.id ).find('.progress').remove();
var $li = $('#' + file.id);
//上傳完如果刪除圖片
var $del= $li.find('.delBtn');
$del.click(function() {
var i = $(".info").length-1;
$(".ui-dialog-title").html("上傳圖片 ("+i--+"/12)");
$(this).fadeOut("normal",function(){
$(this).parents('div.file-item').remove();
uploader.removeFile( file );
})
});
});
if(obj.destroy==true){
uploader.destroy();
}
}
})
$.extend({
uploadVideo:function(obj){
// 初始化Web Uploader
var uploader = WebUploader.create({
// 選完文件后自晰,是否自動上傳。
auto: true,
method:'POST',
dnd:obj.dnd,
fileNumLimit:obj.fileNumLimit,//驗證文件總數(shù)量, 超出則不允許加入隊列
fileSingleSizeLimit:obj.fileSingleSizeLimit *1024*1024,//5*1024*1024,//驗證單個文件大小是否超出限制, 超出則不允許加入隊列
// swf文件路徑
swf: 'Uploader.swf',
// 文件接收服務(wù)端稍坯。
server: obj.server,//'/page/page.json',
pick : {id : obj.pick,
//只能選擇一個文件上傳
multiple: obj.multiple || false},
//限制只能上傳一個文件
// 只允許選擇圖片文件酬荞。
accept: {
title: 'doc',
extensions: obj.accept
},
threads: 1,
duplicate:true,
chunked: true,
chunkSize: 1024 * 1024,
formData : {guid : GUID} ,
resize:obj.resize||false // 不壓縮image, 默認(rèn)如果是jpeg,文件上傳前會壓縮一把再上傳瞧哟!
});
//由于每次點擊彈出框時混巧,原有的按鈕都會變大,在此處新初始化一個按鈕覆蓋掉原有的按鈕
uploader.addButton({
id: '#addVideoButton',
innerHTML: '上傳視頻'
});
// 當(dāng)有文件添加進(jìn)來的時候
uploader.on( 'fileQueued', function( file ) {
$( '#videoList').find('.error').remove();
var $div = $(
'<div id="' + file.id + '" class="item">' +
'<div class="info">' + file.name + '<span class="delVideoBtn">刪除</span>'+'</div>' +
'<input class="videoPath" type="hidden">'+
'</div>'
);
$('#videoList').append( $div );
var $li = $('#' + file.id);
//中途刪除視頻
var $del= $li.find('.delVideoBtn');
$del.show();
$del.click(function() {
//重置隊列
uploader.reset();
$(this).fadeOut("normal",function(){
$(this).parents('div.item').remove();
})
$('#addVideoButton').show();
$('#addVideoButton .webuploader-pick').text('上傳視頻');
$('#videoList').css("background","url(/static/modules/common/images/upvideo.png)100px 80px no-repeat");
});
});
// 文件上傳過程中創(chuàng)建進(jìn)度條實時顯示勤揩。
uploader.on( 'uploadProgress', function( file, percentage ) {
$('#addVideoButton .webuploader-pick').text('上傳中...');
var $li = $( '#'+file.id ),
$percent = $li.find('.progress .progress-bar');
// 避免重復(fù)創(chuàng)建
if ( !$percent.length ) {
$percent = $('<div class="progress"><div id="progress-bar" class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 10%"></div></div>')
.appendTo( $li )
.find('.progress-bar');
}
$percent.css( 'width', percentage * 100 + '%' );
});
// 文件上傳成功咧党,給item添加成功class, 用樣式標(biāo)記上傳成功。
uploader.on( 'uploadSuccess', function( file ,response) {
$('#videoList').css("background","url(/static/modules/common/images/example.jpg)4px 45px no-repeat")
$('#addVideoButton').hide();
var $li = $('#' + file.id);
var $input = $li.find('.videoPath');
$input.off().val(response.filePath);
if(obj.success){
obj.success.call(this,file,response);
$( '#'+file.id ).addClass('upload-state-done');
return ;
}
});
// 文件上傳失敗陨亡,顯示上傳出錯傍衡。
uploader.on( 'uploadError', function( file ) {
var $li = $( '#'+file.id ),$error = $li.find('div.error');
// 避免重復(fù)創(chuàng)建
if ( !$error.length ) {
$error = $('<div class="error"></div>').appendTo( $li );
}
$error.text('上傳失敗');
});
// 驗證大小
uploader.on("error",function (type){
console.log(type);
var $li = $( '#videoList'),$error = $li.find('div.error');
if ( !$error.length ) {
$error = $('<div class="error"></div>').appendTo( $li );
}
if(type == "F_DUPLICATE"){
$error.text("請不要重復(fù)選擇文件!");
}else if(type == "F_EXCEED_SIZE"){
$error.text("附件大小不可超過" + obj.fileSingleSizeLimit + "M!");
}else if(type == "Q_TYPE_DENIED"){
$error.text("請上傳格式為" + obj.msgs + "的附件数苫!");
}else if (type == "Q_EXCEED_NUM_LIMIT"){
$error.text("最多只允許上傳" + obj.fileNumLimit + "個視頻聪舒!");
}
});
// 完成上傳完了,成功或者失敗虐急,先刪除進(jìn)度條箱残。
uploader.on( 'uploadComplete', function( file ) {
$( '#'+file.id ).find('.progress').remove();
});
}
})
$.extend({
uploadFile:function(obj){
// 初始化Web Uploader
var uploader = WebUploader.create({
// 選完文件后,是否自動上傳止吁。
auto: true,
method:'POST',
dnd:obj.dnd,
fileNumLimit:obj.fileNumLimit,//驗證文件總數(shù)量, 超出則不允許加入隊列
fileSingleSizeLimit:obj.fileSingleSizeLimit *1024*1024,//5*1024*1024,//驗證單個文件大小是否超出限制, 超出則不允許加入隊列
// swf文件路徑
swf: 'Uploader.swf',
// 文件接收服務(wù)端被辑。
server: obj.server,//'/page/page.json',
pick : {id : obj.pick,
//只能選擇一個文件上傳
multiple: obj.multiple || false},
//限制只能上傳一個文件
// 只允許選擇圖片文件。
accept: {
title: 'doc',
extensions: obj.accept
},
threads: 1,
duplicate:true,
chunked: true,
chunkSize: 1024 * 1024,
formData : {guid : GUID} ,
resize:obj.resize||false // 不壓縮image, 默認(rèn)如果是jpeg敬惦,文件上傳前會壓縮一把再上傳盼理!
});
//由于每次點擊彈出框時,原有的按鈕都會變大俄删,在此處新初始化一個按鈕覆蓋掉原有的按鈕
uploader.addButton({
id: '#addFileButton',
innerHTML: '上傳附件'
});
var i = $("#fileList .info").length;
$(".ui-dialog-title").html("上傳附件 ("+i+"/3)");
// 當(dāng)有文件添加進(jìn)來的時候
uploader.on( 'fileQueued', function( file ) {
$( '#fileList').find('.error').remove();
var $div = $(
'<div id="' + file.id + '" class="item" style="background:#eee;padding:5px 10px;margin-top:15px">' +
'<div class="info">' + file.name + '<span class="delFileBtn">刪除</span>'+'</div>' +
'<input class="filePath" type="hidden">'+
'</div>'
);
$('#fileList').append( $div );
//中途刪除文件
var $li = $('#' + file.id);
var $del= $li.find('.delFileBtn');
$del.show();
$del.click(function() {
if(!$('#fileList').val()){
$('#fileList').css("background","url(/static/modules/common/images/upfile.png)154px 80px no-repeat");
}
$(this).fadeOut("normal",function(){
$(this).parents('div.item').remove();
uploader.removeFile( file );
})
});
});
// 文件上傳過程中創(chuàng)建進(jìn)度條實時顯示宏怔。
uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress .progress-bar');
// 避免重復(fù)創(chuàng)建
if ( !$percent.length ) {
$percent = $('<div class="progress"><div id="progress-bar" class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 10%"></div></div>')
.appendTo( $li )
.find('.progress-bar');
}
$percent.css( 'width', percentage * 100 + '%' );
});
// 文件上傳成功奏路,給item添加成功class, 用樣式標(biāo)記上傳成功。
uploader.on( 'uploadSuccess', function( file ,response) {
$('#fileList').css("background","");
for(var i=0;i<$("#fileList .info").length+1;i++){
$(".ui-dialog-title").html("上傳附件 ("+i+"/3)");
}
var $li = $('#' + file.id);
var $input = $li.find('.filePath');
$input.off().val(response.filePath);
if(obj.success){
obj.success.call(this,file,response);
$( '#'+file.id ).addClass('upload-state-done');
//上傳完刪除文件
var $del= $li.find('.delFileBtn');
$del.show();
$del.click(function() {
if($('#fileList').val()==""){
$('#fileList').css("background","url(/static/modules/common/images/upfile.png)154px 80px no-repeat");
}
var i = $("#fileList .info").length-1;
$(".ui-dialog-title").html("上傳附件 ("+i--+"/3)");
$(this).fadeOut("normal",function(){
$(this).parents('div.item').remove();
uploader.removeFile( file );
})
});
return ;
}
});
// 文件上傳失敗臊诊,顯示上傳出錯鸽粉。
uploader.on( 'uploadError', function( file ) {
var $li = $( '#'+file.id ),$error = $li.find('div.error');
// 避免重復(fù)創(chuàng)建
if ( !$error.length ) {
$error = $('<div class="error"></div>').appendTo( $li );
}
$error.text('上傳失敗');
});
// 驗證大小
uploader.on("error",function (type){
console.log(type);
var $li = $( '#fileList'),$error = $li.find('div.error');
if ( !$error.length ) {
$error = $('<div class="error"></div>').appendTo( $li );
}
if(type == "F_DUPLICATE"){
$error.text("請不要重復(fù)選擇文件!");
}else if(type == "F_EXCEED_SIZE"){
$error.text("附件大小不可超過" + obj.fileSingleSizeLimit + "M!");
}else if(type == "Q_TYPE_DENIED"){
$error.text("請上傳格式為" + obj.msgs + "的附件抓艳!");
}else if (type == "Q_EXCEED_NUM_LIMIT"){
$error.text("最多只允許上傳" + obj.fileNumLimit + "個附件触机!");
}
});
// 完成上傳完了,成功或者失敗玷或,先刪除進(jìn)度條儡首。
uploader.on( 'uploadComplete', function( file ) {
$( '#'+file.id ).find('.progress').remove();
});
}
})
})();
對應(yīng)上傳圖片的js如下
/*上傳圖片彈框*/
$('#pictureButton').live("click",function(){
/*判斷是否已經(jīng)上傳了視頻*/
if($('#videoUrl').val()==""){
var $d = $dialog.dialog({
id:'dialogPicture',
title:'上傳圖片(0/12)',
content:$('#addPicture'),
width:700,
onshow:function(){
//圖片上傳
$.uploadPicture({
server:'/file/uploadImage.html',
pick:'#addPictureButton',
multiple:false,
fileSingleSizeLimit:5*1024*1024,
fileNumLimit:12,
accept:{
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/jpg,image/jpeg,image/png*'
},
success:function(file ,data){
}
});
},
okValue:'確定',
ok:function(){
//獲得所有class為imgPath輸入域中的value
$("input[class=imgPath]").each(function(){
pictureUrl += $(this).val()+";";
})
$("#pictureUrl").val(pictureUrl);
this.title('提交中…');
setTimeout(function () {
$d.close().remove();
}, 1000);
},
cancelValue:'取消',
cancel:function(){
},
onclose:function(){
}
});
}else{
$dialog.confirm({
title:'溫馨提示',
width:'350',
content:'圖片和視頻不可以同時上傳,確認(rèn)要放棄上傳視頻嗎偏友?',
okValue:'確認(rèn)',
ok:function(){
$('#videoUrl').val("");
var $d = $dialog.dialog({
id:'dialogPicture',
title:'上傳圖片(0/12)',
content:$('#addPicture'),
width:700,
onshow:function(){
//圖片上傳
$.uploadPicture({
server:'/file/uploadImage.html',
pick:'#addPictureButton',
multiple:false,
fileSingleSizeLimit:5*1024*1024,
fileNumLimit:12,
accept:{
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/jpg,image/jpeg,image/png*'
},
success:function(file ,data){
}
});
},
okValue:'確定',
ok:function(){
//獲得所有class為imgPath輸入域中的value
$("input[class=imgPath]").each(function(){
pictureUrl += $(this).val()+";";
})
$("#pictureUrl").val(pictureUrl);
this.title('提交中…');
setTimeout(function () {
$d.close().remove();
}, 1000);
},
cancelValue:'取消',
cancel:function(){
},
onclose:function(){
}
});
},
cancelValue:'取消',
cancel:function(){
$('#pictureUrl').val("");
}
});
}
});
對應(yīng)上傳視頻的js如下
/*上傳視頻彈框*/
$('#videoButton').live("click",function(){
//判斷是否已經(jīng)上傳了圖片
if($('#pictureUrl').val()==""){
var $d = $dialog.dialog({
id:'dialogVideo',
title:'上傳視頻',
content:$('#addVideo'),
width:500,
onshow:function(){
//視頻上傳
$.uploadVideo({
server:'/attachment/uploadVideo.html',
pick:'#addVideoButton',
accept:'mp4,MP4,webm',
msgs:"mp4,webm",
multiple:false,
fileSingleSizeLimit:600,
fileNumLimit:1,
success:function(file ,data){
}
});
},
okValue:'確定',
ok:function(){
//獲得所有class為videoPath輸入域中的value
$("input[class=videoPath]").each(function(){
videoUrl += $(this).val();
})
$('input[name="videoUrl"]').val(videoUrl);
this.title('提交中…');
setTimeout(function () {
$d.close().remove();
}, 1000);
},
cancelValue:'取消',
cancel:function(){
},
onclose:function(){
}
});
}else{
$('#videoButton').live("click",function(){
$dialog.confirm({
title:'溫馨提示',
width:'350',
content:'圖片和視頻不可以同時上傳蔬胯,確認(rèn)要放棄上傳圖片嗎?',
okValue:'確認(rèn)',
ok:function(){
$('#pictureUrl').val("");
var $d = $dialog.dialog({
id:'dialogVideo',
title:'上傳視頻',
content:$('#addVideo'),
width:500,
onshow:function(){
//視頻上傳
$.uploadVideo({
server:'/attachment/uploadVideo.html',
pick:'#addVideoButton',
accept:'mp4,MP4,webm',
msgs:"mp4,webm",
multiple:false,
fileSingleSizeLimit:600,
fileNumLimit:1,
success:function(file ,data){
}
});
},
okValue:'確定',
ok:function(){
//獲得所有class為videoPath輸入域中的value
$("input[class=videoPath]").each(function(){
videoUrl += $(this).val();
})
$('input[name="videoUrl"]').val(videoUrl);
this.title('提交中…');
setTimeout(function () {
$d.close().remove();
}, 1000);
},
cancelValue:'取消',
cancel:function(){
},
onclose:function(){
}
});
}
});
});
}
});
對應(yīng)上傳附件的js如下
/*添加附件彈出框*/
$('#fileButton').live("click",function(){
var $d = $dialog.dialog({
id:'dialogFile',
title:'上傳附件 (0/3)',
content:$('#addFile'),
width:500,
onshow:function(){
/*附件上傳*/
$.uploadFile({
server:'/attachment/uploadDoc.html',
pick:'#addFileButton',
accept:'txt,xls,xlsx,doc,docx,ppt,pptx,pdf,rar,zip',
msgs:'txt,xls,xlsx,doc,docx,ppt,pptx,pdf,rar,zip',
multiple:false,
fileSingleSizeLimit:200,
fileNumLimit:3,
success:function(file ,data){
}
});
},
okValue:'確定',
ok:function(){
//獲得所有class為imgPath輸入域中的value
$("input[class=filePath]").each(function(){
fileUrl += $(this).val()+";";
})
$('input[name="fileUrl"]').val(fileUrl);
this.title('提交中…');
setTimeout(function () {
$d.close().remove();
}, 1000);
},
cancelValue:'取消',
cancel:function(){
},
onclose:function(){
}
});
});