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(...)部分用於在頁面上顯示上傳的圖片路徑，方便用戶查看。

以上是WebUploader多圖上傳：如何獲取所有圖片路徑並保存到輸入框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！