背景：公司的老項目，上傳文件使用的是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頁面，資源可以免費下載

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。