I am facing a challenge with my code as I am trying to upload and display two different files inside of two different divs using two buttons. Currently, my code is only working for one image. How can I modify the code to handle two images successfully? Any help is appreciated!
Here is my existing code:
HTML:
<div class="span12">
<span class="btn btn-default btn-file"> Browse 1 <input type="file" onchange="readURL(this);"></span>
<span class="btn btn-default btn-file"> Browse 2 <input type="file" onchange="readURL(this);"></span>
<div class="place-image" id="myimage">
<div class= "place-content" id="myimage2" onkeypress="return (this.innerText.length <= 16)">
<p contenteditable="true">SALE<br>40%</p>
</div>
</div>
JavaScript:
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#myimage').css('background', 'transparent url('+e.target.result +') left top no-repeat');
}
reader.readAsDataURL(input.files[0]);
}
}
</script>