Question

plupload触发文件选择框时，第一次点击无响应，第二次弹出窗口，第三次弹出2次窗口，第四次弹出3次窗口

<div class="wraper">
<div class="btn-wraper">
<input type="button" value="选择文件..." id="browse1" />
<input type="button" value="选择文件..." id="browse2" />
<input type="button" value="开始上传" id="upload-btn" />
</div>
<ul id="file-list">
</ul>
</div>

<script>
$(document).ready(function(){
$(":input").click(function(){
var uploader = new plupload.Uploader({ //实例化一个plupload上传对象
browse_button : $(this).attr("id"),
url : 'upload.php',
flash_swf_url : 'js/Moxie.swf',
silverlight_xap_url : 'js/Moxie.xap',
filters: {
mime_types : [ //只允许上传图片文件和rar压缩文件
{ title : "图片文件", extensions : "jpg,jpeg,gif,png,bmp" },
{ title : "RAR压缩文件", extensions : "rar,zip" }
],
max_file_size : '10mb', //最大只能上传100kb的文件
prevent_duplicates : true //不允许队列中存在重复文件
}
});

uploader.init(); //初始化

//绑定文件添加进队列事件
uploader.bind('FilesAdded',function(uploader,files){
for(var i = 0, len = files.length; i<len; i++){
var file_name = files[i].name; //文件名
//构造html来更新UI
var html = '<li id="file-' + files[i].id +'"><p class="file-name">' + file_name + '</p><p class="progress"></p></li>';
$(html).appendTo('#file-list');
}
});

//绑定文件上传进度事件
uploader.bind('UploadProgress',function(uploader,file){
$('#file-'+file.id+' .progress').css('width',file.percent + '%');//控制进度条
});

//上传按钮
$('#upload-btn').click(function(){
uploader.start(); //开始上传
});
});
//});
</script>

Answer 1

这个控件每次实例化都会自动生成一个INPUT type=file,所以会出现点几次出弹N-1次,第一次点击没反应是因为没有生成INPUT按钮。
可以改成页面加载时只初始化一次。