WebUploader多圖上傳：如何獲取所有圖片路徑并保存到輸入框？

webuploader多圖上傳：完整保存所有圖片路徑

使用Web Uploader上傳多張圖片時，如果需要將所有圖片路徑保存到一個輸入框中，直接使用$(“#info3”).val(json.stringify(response.imgurl)); 只會保存最后一張圖片的路徑，因為每次上傳都會覆蓋之前的路徑。本文提供解決方案，確保所有圖片路徑都被完整保存。

問題根源在于原始代碼每次上傳成功后都覆蓋了輸入框的值。解決方法是創建一個數組，將每次上傳成功的圖片路徑添加到數組中，最后再將數組內容寫入輸入框。

改進后的代碼：

var imgUrls = [];  uploader.on('uploadSuccess', function(file, response) {     // 將圖片路徑顯示在#imgs_url中（可選）     $("#imgs_url").append(JSON.stringify(response.imgurl) + "<br>");      // 將圖片路徑添加到imgUrls數組     imgUrls.push(response.imgurl); // 直接push路徑，無需再次JSON.stringify      // 將數組內容以逗號分隔符連接成字符串，并賦值給輸入框     $("#info3").val(imgUrls.join(','));  });

這段代碼首先定義一個空數組imgUrls。在uploadSuccess事件中，將response.imgurl直接推入數組（無需再次JSON.stringify，因為join方法會自動處理）。最后，使用join(‘,’)方法將數組元素以逗號連接成字符串，并將此字符串賦值給#info3輸入框。 這樣，#info3輸入框就包含了所有上傳圖片的路徑。

通過此方法，每次上傳成功的圖片路徑都會添加到數組中，避免了覆蓋，從而完整保存了所有上傳圖片的路徑信息。 可選的$(“#imgs_url”).append(…)部分用于在頁面上顯示上傳的圖片路徑，方便用戶查看。