Is it possible to have two separate inputs for uploading images, each setting a different background image in a div?
The second file input is:
<input type='file' id='getval' name="logo" />
I want this file to be set as the background image of the following div:
<div id="logo"></div>
In summary, here's what I am trying to achieve:
document.getElementById('getval').addEventListener('change', readURL, true);
function readURL(){
var file = document.getElementById("getval").files[0];
var reader = new FileReader();
reader.onloadend = function(){
document.getElementById('adXL').style.backgroundImage = "url(" + reader.result + ")";
}
if(file){
reader.readAsDataURL(file);
}else{
}
}h2 {
font-size: 14px;
margin: 14px 0 3px;
}
#adXL{
background-image:url('');
background-size:cover;
background-position: center;
min-height: 200px;
width: 100%;
min-width: 0;
border: 0px solid #ddd;
display: flex;
flex-direction: column;
margin: 20px 0 0 0;
background-color: #eee;
}
#logo{
background-image:url('');
background-size:cover;
background-position: center;
min-width: 0;
width: 150px;
min-height: 50px;
display: flex;
flex-direction: column;
margin: 20px;
background-color: #ccc;
}<h2>Background Image</h2>
<input type='file' id='getval' name="background-image" />
<h2>logo</h2>
<input type='file' id='getval' name="background-image" />
<div id='adXL'>
<div id='logo'>
</div>
</div>