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

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

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

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

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

修改後的代碼如下：

 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) "
"); 這行代碼則保持不變，繼續在頁面上顯示所有圖片地址。 通過這種方式，就能正確地獲取所有上傳圖片的地址了。

以上是JavaScript多圖片上傳：如何保存所有圖片地址而不是僅保存最後一張？的詳細內容。更多資訊請關注PHP中文網其他相關文章！