状况
WebUploader 在bootstrap modal下无法正常显示，点击选择文件无反应，或者点击上传无反应
原因
当一个元素是hidden时，addbutton绑定是会失败的，所以单击选择文件按钮就无效了
而bootstrap模态框一开始是隐藏的，因此必须在其显示完毕后才可以初始化webuploader
解决
方法一:
在上传按钮上监听一个点击事件，如create()，在该函数中重新生成上传按钮
function create(){
uploader.addButton({
id: '#filePicker',
innerHTML: '上传'
});
}通过该函数，每次点击上传时重新生成上传按钮，这种方式的弊端是，第一次点击上传按钮总是没反应的，之后再次点击才能弹出文件选择框
方法二（推荐）
在模态框弹出后再初始化webuploader
var uploader;
//在点击弹出模态框的时候再初始化WebUploader，解决点击上传无反应问题
$("#myModal").on("shown.bs.modal",function(){
$list = $('#thelist');
$btn = $('#ctlBtn');
uploadContainer = $('#queuedFilesTable');
state = 'pending';
uploader = WebUploader.create({
// 不压缩image
resize: false,
// swf文件路径
swf: '/js/plugins/uploader/js/Uploader.swf',
// 文件接收服务端。
server: "/path/to/your/server",
pick: '#picker',
fileSingleSizeLimit: 100 * 1024 * 1024, //设定单个文件大小
fileNumLimit: 3,
threads: 1//(这个是关键 如果不限制同时上传的数目 会导致后台接受的分片错乱
// 比如按正常的分片第一片应该是开头 但接收的可能就变成第三片从而顺序错乱
// 这是由于百度webuploader默认允许同时最大上传进程数为3个
// 所以会导致接受顺序错乱从而重组发生错误)
});
// 当有文件添加进来的时候
uploader.on('fileQueued', function (file) {
var p;
var $li = $('' +
'' + file.name + '' +
'' +
'等待上传 ... ' +
'移除' +
'');
$img = $li.find('img');
//$list.append($li);
uploadContainer.append($li);
uploader.makeThumb(file, function (error, src) {
if (error) {
$img.replaceWith('不能预览');
return;
}
$img.attr('src', src);
}, 80, 60);
});
//删除待上传文件
$list.on("click", ".file-del", function () {
var fileItem = $(this).parent().parent();
var id = $(fileItem).attr("id");
var fileIndex = $(fileItem).index();
uploader.removeFile(id, true);
$list.splice(fileIndex, 1);
$(fileItem).fadeOut(function () {
$(fileItem).remove();
});
});
//进度条
uploader.on('uploadProgress', function (file, percentage) {
if (file.statusText != 'done') {
var $li = $('#' + file.id);
// $percent = $li.find('.progress .progress-bar');
$percent = $li.find('.progress .progress-bar');
if (!$percent.length) {
/**
$percent = $('' +
'' +
'' +
'').appendTo($li).find('.progress-bar');
**/
$percent = $('' +
' ' +
' ' +
'' +
''
).appendTo($li).find('.progress-bar');
}
$li.find('p.state').text('上传中');
$percent.css('width', percentage * 100 + '%');
}
});
//上传成功回调,
uploader.on('uploadSuccess', function (file, response) {
$('#' + file.id).find('p.state').text('已上传');
setTimeout(function () {
var fileItem = $('#' + file.id);
var id = $(fileItem).attr("id");
var fileIndex = $(fileItem).index();
uploader.removeFile(id, true);
$list.splice(fileIndex, 1);
$(fileItem).fadeOut(function () {
$(fileItem).remove();
});
}, 1500);
});
//上传出错回调
uploader.on('uploadError', function (file) {
$('#' + file.id).find('p.state').text('上传出错');
setTimeout(function () {
var fileItem = $('#' + file.id);
var id = $(fileItem).attr("id");
var fileIndex = $(fileItem).index();
uploader.removeFile(id, true);
$list.splice(fileIndex, 1);
$(fileItem).fadeOut(function () {
$(fileItem).remove();
});
}, 1500);
});
//不管成功或者失败，在文件上传完后都会触发uploadComplete事件
uploader.on('uploadComplete', function (file) {
// $('#' + file.id).parent().find('.progress').fadeOut();
$('#progress_' + file.id).fadeOut();
});
//默认如果啥也不处理，只要有返回数据就认为是成功，就算返回的是错误信息，也认为是成功了。
//
// 但是，在认为成功前会派送一个事件uploadAccept，
// 这个事件是用来询问是否上传成功的。在这个事件中你可以拿到上传的是哪个文件，
// 以及对应的服务端返回reponse。
uploader.on('uploadAccept', function (file, response) {
if (response.result_code != '0') {
return false;
} else {
var noPrefix = $('#fileTable tr:last td:first').html();
if (noPrefix == null) {
noPrefix = '0';
}
var no = parseInt(noPrefix) + 1;
var html = $(' ' +
'' + no + '.' +
''
+ response.result_info + '' +
'删除' +
'');
$('#fileTable').append(html);
if (oid != null) {
$.post('appendAnnex',
{
oid: oid,
fileName: response.result_info
},
function (data, textStatus, jqXHR) {
}, 'json');
} else {
var appendAnnex = '';
$('#fileContainer').append(appendAnnex);
}
return true;
}
});
/**
* 任何动作发生时都会回调
*/
uploader.on('all', function (type) {
if (type === 'startUpload') {
state = 'uploading';
} else if (type === 'stopUpload') {
state = 'paused';
} else if (type === 'uploadFinished') {
state = 'done';
}
if (state === 'uploading') {
$btn.text('暂停上传');
} else {
$btn.text('开始上传');
}
});
//给开始上传按钮绑定点击方法
$btn.on('click', function () {
if (state === 'uploading') {
uploader.stop(true);//不加ture暂停上传没用！
} else {
uploader.upload();
}
});
//当validate不通过时，会以派送错误事件的形式通知调用者
uploader.on('error', function (handler) {
if (handler == "Q_EXCEED_NUM_LIMIT") {
alert("一次最多只能上传3个文件");
}
if (handler == "Q_EXCEED_SIZE_LIMIT") {
alert("文件过大");
}
});
});单单这样也会有问题，这样每次弹出模态框之后都加载一个边框，使按钮越来越大，所以需要在关闭模态框后销毁webuploader
//关闭模态框销毁WebUploader，解决再次打开模态框时按钮越变越大问题
$('#myModal').on('hide.bs.modal', function () {
$("#responeseText").text("");
uploader.destroy();
//这里是重点！！！！
$btn.unbind('click');
}); 划重点，这样的话，点击上传的按钮，第二次打开会多次绑定Click事件，所以需要在模态框关闭的时候，把上传控件的绑定事件关掉