前言：
專案中常會大量的使用到圖片上傳，之前涉及到的時候常常會在網路上下載一些素材直接拿過來使用，但隨著專案的增加發現用的是各式各樣的，導致非常混亂。所以抽空寫了一個DEMO來梳理下圖片上傳的流暢以及單圖和多圖上傳需要注意的點。
多圖上傳
多圖上傳，這裡只是做了前端的展示效果，實際專案中，多圖上傳應該是每次上傳一張圖片後向後台發送一次請求，後台返回img路徑然後進行展現。
（推薦教學：js教學）
為什麼一定要傳入後台在進行展現呢？
1、如果直接在前台先展現base64圖片路徑，在向後台發送請求。如果介面出現錯誤後，會給使用者產生錯覺，以為圖片上傳成功，而這時後台是沒有接收到圖片的；
2、file檔每次發生變化，會將先前的files檔給覆蓋掉。如果直接展現不用ajax提交後，最後用form提交只會提交最後一張。
多图上传/单图上传 
單一圖上傳
去掉input中的multiple 屬性就變成了單圖上傳；
依照上邊的程式碼直接就可以實現單圖上傳和多圖上傳。下邊在說下單圖上傳和多圖上傳提交需要注意的；
1、單圖上傳可以跟隨form表單一起提交，給input一個name值後台就可以提交過去；
2、多圖上傳不可以跟form一起提交，因為每次上傳後file只會保留最新的；可以先透過ajax將圖片提交成功後，在form內去循環創建隱藏的input將後台返回的路徑設定成改input的val值最後跟著form提交；需要注意隱藏的input的name值寫成[]形式，例如：name=“img[]”。這樣在form提交的時候後台就可以接受到所有的圖片；
以上的程式碼，適用於前端點擊file上傳圖片後的顯示。具體與後台的一些互動可以根據實際專案中的需求進行增加！
以上是js如何實作多圖與單圖的上傳顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！
