Multiple Input [type=file] on same page

Question

I have one input here that can upload a file into a div as it's background image. But how would I add a second input [type=file] that could upload a second image into a second div?

The second file that I want to upload is called:

<input type='file' id='getval' name="logo" />

And I want to place that file as the background-image of the div called:

<div id="logo"></div>

here's the whole thing:

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>

dont re-use IDs in HTML, that's not what they are there for. — Luca Kiebel
– Luca Kiebel, Commented Apr 12, 2018 at 12:08
ok, so how would I change it in order to be able to add a second file? — johnny555
– johnny555, Commented Apr 12, 2018 at 12:09

Jari Rengeling · Accepted Answer · 2018-04-12 12:22:18Z

2

Try this, never re-use IDs in HTML.

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{
    }
}

document.getElementById('getval2').addEventListener('change', readURL2, true);
function readURL2(){
   var file2 = document.getElementById("getval2").files[0];
   var reader2 = new FileReader();
   reader2.onloadend = function(){
      document.getElementById('logo').style.backgroundImage = "url(" + reader2.result + ")";        
   }
   if(file2){
      reader2.readAsDataURL(file2);
    }else{
    }

edited Apr 12, 2018 at 12:22

answered Apr 12, 2018 at 12:10

Jari Rengeling

3261 silver badge17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

johnny555 Over a year ago

this breaks the first input[type=file]

johnny555 Over a year ago

Can you run it in a jsfiddle?

Jari Rengeling Over a year ago

@johnny555 please check my updated answer, replace that code with your exisiting functions. should work.

Ram Segev · Accepted Answer · 2018-04-12 12:38:40Z

instead of adding eventListner add change attribute to your input file and call the function readURL(). You can then pass parameters and reuse the function.

function readURL(input,output){
   var file = document.getElementById(input.id).files[0];
   var reader = new FileReader();
   reader.onloadend = function(e){
      document.getElementById(output).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' onchange="readURL(this, 'adXL')" name="background-image" />
<h2>logo</h2>
<input type='file' id='getval' onchange="readURL(this, 'logo')" name="background-image" />

<div id='adXL'>
<div id='logo'>
</div>
</div>

Collectives™ on Stack Overflow

Multiple Input [type=file] on same page

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related