背景：公司的老項(xiàng)目，上傳文件使用的是swfupload插件（該插件依賴的是flash，使用的原因可能是當(dāng)時(shí)這個(gè)插件有進(jìn)度條等一系列的配置），但是現(xiàn)在該項(xiàng)目要求兼容火狐，從2020年1月份火狐和谷歌已經(jīng)拋棄了flash，所以對(duì)應(yīng)的功能要找插件代替，所以最終選擇了plupload

1.基礎(chǔ)的API可以參考地址

https://www.cnblogs.com/2050/p/3913184.html

2.問題1：上傳多個(gè)文件時(shí)，最后一個(gè)文件不顯示進(jìn)度條

我是在"FileUploaded"方法中處理上傳完成的回調(diào)邏輯的，為什么選擇這個(gè)方法是因?yàn)榛卣{(diào)參數(shù)中包含后臺(tái)返回的數(shù)據(jù)

原來的寫法

uploader.bind('FileUploaded',function(uploader,file,serverData){//添加判斷如果當(dāng)前待上傳為0，說明都已上傳完畢，再執(zhí)行后續(xù)邏輯if(uploader.total.queued!=0){return;}alert("分析完成"); })

修改之后的寫法——添加了定時(shí)器保證進(jìn)度條加載后再執(zhí)行alert彈框

uploader.bind('FileUploaded',function(uploader,file,serverData){//添加判斷如果當(dāng)前待上傳為0，說明都已上傳完畢，再執(zhí)行后續(xù)邏輯if(uploader.total.queued!=0){return;}setTimeout(function(){alert("分析完成");}) })

問題2：后臺(tái)要求接收的參數(shù)形式為數(shù)組，如果非數(shù)組則直接跳過接口，呈現(xiàn)的結(jié)果就是接口200，但是沒有走后臺(tái)（對(duì)接的是JAVA），但是前端都是一個(gè)一個(gè)文件上傳的。

網(wǎng)上找了很多方法都沒有找到合適的，后來參考之前插件發(fā)現(xiàn)，在上傳最后一個(gè)文件時(shí)通過url多傳遞了一個(gè)參數(shù) “indentify”=“end”,后來猜想應(yīng)該是后臺(tái)根據(jù)這個(gè)參數(shù)做了識(shí)別，才接收到的數(shù)組，但plupload本身都是通過start()方法單獨(dú)上傳文件的。

//在圖片上傳之前修改上傳地址和參數(shù) uploader.bind('BeforeUpload',function(uploader,file){//如果剩下最後一個(gè)文件時(shí)，添加該參數(shù)，后臺(tái)會(huì)一起接收，接收到的數(shù)據(jù)為數(shù)組if(uploader.total.queued===1){uploader.settings.url = "原本的接口地址"+'?indentify=end'}else{uploader.settings.url = "原本的接口地址"//uploader.setOption("multipart_params",{"fileFileName":file.name,"fileContentType":'.txt'});} })

問題3：進(jìn)度條自定義，當(dāng)然標(biāo)簽的嵌套不一樣，這些都是要自己定義的

//當(dāng)文件添加到上傳隊(duì)列后觸發(fā) 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) }); //上傳進(jìn)度的監(jiān)聽 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+'%'})} });

一個(gè)簡(jiǎn)單的html頁面，資源可以免費(fèi)下載

總結(jié)

以上是生活随笔為你收集整理的plupload上传文件碰到的问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。