I am trying to find a way to preview multiple images uploaded from different inputs. When the button is pressed, the content from a textarea containing <img src="$img" id="img1"> is written inside a div called seeimg. The IDs for these images range from 1 to 15 (img1, img2, img3...img15), and I want the images uploaded by the user to be displayed within the seeimg div.
Here is the HTML structure:
<form method="post" enctype="multipart/form-data" id="mainform">
Imagine 1:<br>
<input type="file" name="img1" id="img1"><br>
<br><br>
[Other input fields for images 2-14]
Imagine 15 :<br>
<textarea id="insert" name="content"></textarea>
<input type="file" name="img15" id="img15"><br>
</form>
<div id="seeimg">
</div>
The current issue with the script is that it only shows the image uploaded in the first file input (
<input type="file" name="img1" id="img1">Jquery
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
console.log(e.target.result+" , "+i);
$('#seeimg #img'+i).attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("form#mainform #img"+i).change(function(){
readURL(this);
i++;
});
TL;DR: The script currently only works for the first file input and keeps changing other image sources when a new image is uploaded.
Fiddle: https://jsfiddle.net/eLss3ojx/6/