使用
ajax上傳檔案
,指望這個物件:
let fd = new FormData();
html程式碼:
使用onchange來觸發事件比較簡潔。this引數就是這個type=“file”的input元素本身。
ajax上傳多檔案,一次上傳多張圖片 關鍵程式碼
這個元素有一個files成員,files是一個數組。一次上傳一個檔案還是
一次上傳多個檔案
,就在於是否像上圖那樣迴圈。
在控制檯看一眼files成員(列印上圖的filesList變數):
由此,此屬性在以下場景可以發揮作用:
檔案大小有限制,可以先用files成員旗下的size成員獲得檔案大小,判斷是否超過限制,而不需上傳完成才獲得服務端的反饋;
副檔名有限制,可以先用files成員旗下的name成員獲得副檔名,判斷是否允許,而不需上傳完成才獲得服務端的反饋;
檔案型別有限制,可以先用files成員旗下的type成員獲得檔案型別,判斷是否允許,而不需上傳完成才獲得服務端的反饋;
其他js程式碼:
ajax上傳檔案,完成百分比
至於服務端php程式碼,使用表單/重新整理式/上傳/多檔案/怎麼處理/就怎麼來。因為php收到的資料是這樣的:
以上js程式碼在chrome70下執行,檔案傳不上去,在UC、搜狗高速瀏覽器下可以。知道為什麼嗎?知道怎麼辦嗎?可以上頭條搜一搜。