I have been attempting to figure out a way to repeat the script so that I can display 3 photos on click and insert a URL. The code below successfully works for the first picture, but I am struggling to make it display the second picture. Currently, the URL populates the second input field but does not display any image.
<div class="form-group">
<label class="col-md-4 control-label" >Photo 1</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-camera pink"></i></span>
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<img id="blah1" alt="Image Preview" width="247" height="142"/>
</form></div></div></div>
<script type="text/javascript">
function readURL1(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah1').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL1(this);
});
</script>
<div class="form-group">
<label class="col-md-4 control-label">Photo 2</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-camera pink"></i></span>
<form id="form2" runat="server">
<input type='file' id="imgInp2" />
<img id="blah2" alt="Image Preview" width="247" height="142"/>
</form></div></div></div>
<script type="text/javascript">
function readURL2(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah2').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp2").change(function(){
readURL2(this);
});
</script>