同一页面上的多输入[type = file]

Question

我这里有一个输入，可以将文件上传到div作为它的背景图像。但是，我如何添加第二个输入[type = file]，可以将第二个图像上传到第二个div？

我要上传的第二个文件叫做：

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

我希望将该文件作为div的背景图像放置：

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

这就是整个事情：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

试试这个，从不重复使用HTML中的ID。

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

Answer 2

而不是将eventListner添加更改属性添加到输入文件并调用函数readURL（）。然后，您可以传递参数并重用该函数。

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>