ajax上傳多檔案,一次上傳多張圖片

使用

ajax上傳檔案

,指望這個物件:

let fd = new FormData();

html程式碼:

使用onchange來觸發事件比較簡潔。this引數就是這個type=“file”的input元素本身。

ajax上傳多檔案,一次上傳多張圖片

ajax上傳多檔案,一次上傳多張圖片 關鍵程式碼

這個元素有一個files成員,files是一個數組。一次上傳一個檔案還是

一次上傳多個檔案

,就在於是否像上圖那樣迴圈。

在控制檯看一眼files成員(列印上圖的filesList變數):

ajax上傳多檔案,一次上傳多張圖片

由此,此屬性在以下場景可以發揮作用:

檔案大小有限制,可以先用files成員旗下的size成員獲得檔案大小,判斷是否超過限制,而不需上傳完成才獲得服務端的反饋;

副檔名有限制,可以先用files成員旗下的name成員獲得副檔名,判斷是否允許,而不需上傳完成才獲得服務端的反饋;

檔案型別有限制,可以先用files成員旗下的type成員獲得檔案型別,判斷是否允許,而不需上傳完成才獲得服務端的反饋;

其他js程式碼:

ajax上傳多檔案,一次上傳多張圖片

ajax上傳檔案,完成百分比

ajax上傳多檔案,一次上傳多張圖片

至於服務端php程式碼,使用表單/重新整理式/上傳/多檔案/怎麼處理/就怎麼來。因為php收到的資料是這樣的:

ajax上傳多檔案,一次上傳多張圖片

ajax上傳多檔案,一次上傳多張圖片

以上js程式碼在chrome70下執行,檔案傳不上去,在UC、搜狗高速瀏覽器下可以。知道為什麼嗎?知道怎麼辦嗎?可以上頭條搜一搜。