WebUploader Multi-Picture Upload: How to get all image paths and save them to the input box?

WebUploader multi-picture upload: save all image paths in full

When uploading multiple images using Web Uploader, if you need to save all image paths to an input box, use $("#info3").val(JSON.stringify(response.imgurl)); directly to save the path of the last image, because each upload will overwrite the previous path. This article provides solutions to ensure that all image paths are saved intact.

The root of the problem is that the original code overwrites the value of the input box every time it is uploaded successfully. The solution is to create an array, add the image path that is successfully uploaded to the array, and finally write the contents of the array into the input box.

Improved code:

 var imgUrls = [];

uploader.on('uploadSuccess', function(file, response) {
    // Show the image path in #imgs_url (optional)
    $("#imgs_url").append(JSON.stringify(response.imgurl) "<br> ");

    // Add the image path to the imgUrls array imgUrls.push(response.imgurl); // Push the path directly without JSON.stringify again

    // Concatenate the array content into a string with a comma-separator and assign it to the input box $("#info3").val(imgUrls.join(',')); 
});

This code first defines an empty array imgUrls . In the uploadSuccess event, push response.imgurl directly into the array (no need to JSON.stringify again, because the join method will be handled automatically). Finally, use the join(',') method to concatenate the array elements into a string with commas and assign this string to the #info3 input box. In this way, the #info3 input box contains the paths to all uploaded images.

Through this method, the path of the image successfully uploaded is added to the array, avoiding overwriting, thereby saving the path information of all uploaded images in full. The optional $("#imgs_url").append(...) part is used to display the uploaded image path on the page for easy viewing by users.

The above is the detailed content of WebUploader Multi-Picture Upload: How to get all image paths and save them to the input box?. For more information, please follow other related articles on the PHP Chinese website!