JavaScript多圖片上傳：如何保存所有圖片地址而不是僅保存最后一張？

關于JavaScript圖片上傳路徑處理的疑問

在進行多張圖片上傳時，如何將所有圖片的地址都保存下來，而不是只保存最后一張圖片的地址，是一個常見問題。本文將針對以下代碼片段，解釋如何修改代碼以實現此功能。

代碼片段展示了一個使用WebUploader插件實現多圖片上傳的功能。uploader.on(‘uploadSuccess’, function(file,response) { … }); 這段代碼會在每次圖片上傳成功后執行，但是原代碼中$(“#info3”).val(json.stringify(response.imgurl)); 這行代碼每次都會覆蓋#info3 input框中的值，導致最終只能獲取到最后一張圖片的地址。

為了解決這個問題，我們可以創建一個數組來存儲所有上傳圖片的地址，并在每次上傳成功后將新的地址添加到數組中。最后，再將數組中的所有地址以某種格式連接起來，賦值給#info3 input框。

修改后的代碼如下：

立即學習“Java免費學習筆記（深入）”；

var imgUrls = [];  uploader.on('uploadSuccess', function(file,response) {     $("#imgs_url").append(JSON.stringify(response.imgurl)+"<br>");      imgUrls.push(JSON.stringify(response.imgurl));      $("#info3").val(imgUrls.join(', ')); });

這段代碼首先定義了一個空數組imgUrls。在每次上傳成功后，它會將返回的圖片地址JSON.stringify(response.imgurl)添加到imgUrls數組中。最后，它使用join(‘, ‘)方法將數組中的所有地址用逗號和空格連接起來，并將結果賦值給#info3 input框。這樣，#info3 input框中就包含了所有上傳圖片的地址。 $(“#imgs_url”).append(JSON.stringify(response.imgurl)+”
“); 這行代碼則保持不變，繼續在頁面上顯示所有圖片地址。 通過這種方式，就能正確地獲取所有上傳圖片的地址了。