Is there a way to allow users to upload multiple images from their computer and have them displayed in separate divs on the webpage? I want users to be able to select images using input fields and then see the uploaded images in different div containers.
HTML
<form id="form" runat="server">
<input type='file' class="img" />
<input type='file' class="img" />
<input type='file' class="img" />
</form>
<div>
<img class="image" src="#" alt="image 1" />
</div>
<div>
<img class="image" src="#" alt="image 2" />
</div>
<div>
<img class="image" src="#" alt="image 3" />
</div>
JQuery
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('.image').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(".img").change(function(){
readURL(this);
});