JavaScript Multi-Image Upload: How to save all image addresses instead of just saving the last one?

Questions about JavaScript image upload path processing

When uploading multiple images, it is a common problem to save the address of all images instead of just saving the address of the last image. This article will explain how to modify the code to implement this functionality for the following code snippet.

The code snippet shows a function of using the WebUploader plugin to implement multiple image uploads. uploader.on('uploadSuccess', function(file,response) { ... }); This code will be executed after each image upload is successful, but the original code is $("#info3").val(JSON.stringify(response.imgurl)); This line of code will overwrite the value in the #info3 input box every time, resulting in the end being able to get the address of the last image.

To solve this problem, we can create an array to store the addresses of all uploaded images and add the new address to the array after each upload is successful. Finally, all addresses in the array are connected in some format and assigned to the #info3 input box.

The modified code is as follows:

 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(', '));
});

This code first defines an empty array imgUrls. After each upload is successful, it will add the returned image address JSON.stringify(response.imgurl) to the imgUrls array. Finally, it uses the join(', ') method to concatenate all addresses in the array with commas and spaces, and assigns the result to the #info3 input box. In this way, the #info3 input box contains the addresses of all uploaded images. $("#imgs_url").append(JSON.stringify(response.imgurl) "
"); This line of code remains unchanged and continues to display all image addresses on the page. In this way, you can correctly obtain the addresses of all uploaded images.

The above is the detailed content of JavaScript Multi-Image Upload: How to save all image addresses instead of just saving the last one?. For more information, please follow other related articles on the PHP Chinese website!