plupload上传文件碰到的问题

背景：公司的老项目，上传文件使用的是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+'%'})
	}
});

一个简单的html页面，资源可以免费下载