背景:公司的老项目,上传文件使用的是swfupload插件(该插件依赖的是flash,使用的原因可能是当时这个插件有进度条等一系列的配置),但是现在该项目要求兼容火狐,从2020年1月份火狐和谷歌已经抛弃了flash,所以对应的功能要找插件代替,所以最终选择了plupload
1.基础的API可以参考地址
https://www.cnblogs.com/2050/p/3913184.html
2.问题1:上传多个文件时,最后一个文件不显示进度条
我是在"FileUploaded"方法中处理上传完成的回调逻辑的,为什么选择这个方法是因为回调参数中包含后台返回的数据
原来的写法
uploader.bind('FileUploaded',function(uploader,file,serverData){
//添加判断如果当前待上传为0,说明都已上传完毕,再执行后续逻辑
if(uploader.total.queued!=0){
return;
}
alert("分析完成");
})
修改之后的写法——添加了定时器保证进度条加载后再执行alert弹框
uploader.bind('FileUploaded',function(uploader,file,serverData){
//添加判断如果当前待上传为0,说明都已上传完毕,再执行后续逻辑
if(uploader.total.queued!=0){
return;
}
setTimeout(function(){
alert("分析完成");
})
})
问题2:后台要求接收的参数形式为数组,如果非数组则直接跳过接口,呈现的结果就是接口200,但是没有走后台(对接的是JAVA),但是前端都是一个一个文件上传的。
网上找了很多方法都没有找到合适的,后来参考之前插件发现,在上传最后一个文件时通过url多传递了一个参数 “indentify”=“end”,后来猜想应该是后台根据这个参数做了识别,才接收到的数组,但plupload本身都是通过start()方法单独上传文件的。
//在图片上传之前修改上传地址和参数
uploader.bind('BeforeUpload',function(uploader,file){
//如果剩下最後一個文件时,添加该参数,后台会一起接收,接收到的数据为数组
if(uploader.total.queued===1){
uploader.settings.url = "原本的接口地址"+'?indentify=end'
}else{
uploader.settings.url = "原本的接口地址"
//
uploader.setOption("multipart_params",{"fileFileName":file.name,"fileContentType":'.txt'});
}
})
问题3:进度条自定义,当然标签的嵌套不一样,这些都是要自己定义的
//当文件添加到上传队列后触发
uploader.bind('FilesAdded',function(uploader,files){
var fileHtml ="";
if(files&&files.length>0){
$.each(files,function(index,item){
fileHtml+="<div><div>"+item.name+"<img uploadId='"+item.id+"' οnclick=delFile('"+item.id+"') src='<c:url value="/images/cancel.png"/>'/></div><div id='percent"+item.id +"'><span></span><span class='percentNum'></span></div></div>"
})
}
//附件列表
$("#fsUploadProgress").append(fileHtml)
});
//上传进度的监听
uploader.bind('UploadProgress',function(uploader,file){
var percent = file.percent;
if(percent==100){
$("#percent" + file.id).find('.percentNum').html("上传完成")
$("#percent" + file.id).find('span').eq(0).css({width:"100%"})
}else{
$("#percent" + file.id).find('.percentNum').html(percent+'%')
$("#percent" + file.id).find('span').eq(0).css({width:percent+'%'})
}
});