根据需求 修改了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,//验证文件总数量, 超出则不允许加入队列
fileSingleSizeLimit:obj.fileSingleSizeLimit ,//5*1024*1024,//验证单个文件大小是否超出限制, 超出则不允许加入队列
// swf文件路径
swf: 'Uploader.swf',
// 文件接收服务端。
server: obj.server,//'/page/page.json',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: obj.pick,//'#filePicker',
// 只允许选择图片文件。
accept: obj.accept,
thumb:{
width: 110,
height: 110,
// 图片质量，只有type为`image/jpeg`的时候才有效。
quality: 70,
// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
allowMagnify: true,
// 是否允许裁剪。
crop: true,
// 为空的话则保留原有图片格式。
// 否则强制转换成指定的类型。
type: ''//'image/jpeg'
},
duplicate:true,
compress:false,
resize:obj.resize||false // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
});
//由于每次点击弹出框时，原有的按钮都会变大，在此处新初始化一个按钮覆盖掉原有的按钮
uploader.addButton({
id: '#addPictureButton',
innerHTML: '+'
});
var i = $("#pictureList .info").length;
$(".ui-dialog-title").html("上传图片 ("+i+"/12)");
// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) {
//图片数目限制为12张
if($('.file-item').length<12){
//创建新添加图片和删除条
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');
}
});
// 创建缩略图
// 如果为非图片文件，可以不用调用此方法。
// thumbnailWidth x thumbnailHeight 为 100 x 100
var thumbnailWidth = 100,
thumbnailHeight=100;
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr( 'src', src );
}, thumbnailWidth, thumbnailHeight );
});
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress .progress-bar');
$info = $li.find('.info');
// 避免重复创建
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, 用样式标记上传成功。
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
});
});
// 完成上传完了，成功或者失败，先删除进度条。
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,//验证文件总数量, 超出则不允许加入队列
fileSingleSizeLimit:obj.fileSingleSizeLimit *1024*1024,//5*1024*1024,//验证单个文件大小是否超出限制, 超出则不允许加入队列
// swf文件路径
swf: 'Uploader.swf',
// 文件接收服务端。
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, 默认如果是jpeg，文件上传前会压缩一把再上传！
});
//由于每次点击弹出框时，原有的按钮都会变大，在此处新初始化一个按钮覆盖掉原有的按钮
uploader.addButton({
id: '#addVideoButton',
innerHTML: '上传视频'
});
// 当有文件添加进来的时候
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");
});
});
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
$('#addVideoButton .webuploader-pick').text('上传中...');
var $li = $( '#'+file.id ),
$percent = $li.find('.progress .progress-bar');
// 避免重复创建
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, 用样式标记上传成功。
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');
// 避免重复创建
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("请不要重复选择文件！");
}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 + "个视频！");
}
});
// 完成上传完了，成功或者失败，先删除进度条。
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,//验证文件总数量, 超出则不允许加入队列
fileSingleSizeLimit:obj.fileSingleSizeLimit *1024*1024,//5*1024*1024,//验证单个文件大小是否超出限制, 超出则不允许加入队列
// swf文件路径
swf: 'Uploader.swf',
// 文件接收服务端。
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, 默认如果是jpeg，文件上传前会压缩一把再上传！
});
//由于每次点击弹出框时，原有的按钮都会变大，在此处新初始化一个按钮覆盖掉原有的按钮
uploader.addButton({
id: '#addFileButton',
innerHTML: '上传附件'
});
var i = $("#fileList .info").length;
$(".ui-dialog-title").html("上传附件 ("+i+"/3)");
// 当有文件添加进来的时候
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 );
})
});
});
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress .progress-bar');
// 避免重复创建
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, 用样式标记上传成功。
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');
// 避免重复创建
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("请不要重复选择文件！");
}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 + "个附件！");
}
});
// 完成上传完了，成功或者失败，先删除进度条。
uploader.on( 'uploadComplete', function( file ) {
$( '#'+file.id ).find('.progress').remove();
});
}
})
})();
对应上传图片的js如下
/*上传图片弹框*/
$('#pictureButton').live("click",function(){
/*判断是否已经上传了视频*/
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:'图片和视频不可以同时上传，确认要放弃上传视频吗？',
okValue:'确认',
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("");
}
});
}
});
对应上传视频的js如下
/*上传视频弹框*/
$('#videoButton').live("click",function(){
//判断是否已经上传了图片
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:'图片和视频不可以同时上传，确认要放弃上传图片吗？',
okValue:'确认',
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(){
}
});
}
});
});
}
});
对应上传附件的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(){
}
});
});
网友评论