загружать несколько изображений в разные divs

Question

У меня есть две кнопки, которые я хочу, чтобы загрузить два разных файла и отобразить их внутри двух разных div. Мой код отлично работает для 1 изображения. Как изменить код, чтобы иметь возможность обрабатывать 2 изображения? Благодаря!

Мой код на данный момент:

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> 

Answer 1

Добавить data-preview="preview_div_id" каждому input. Затем в функции onload вы должны заменить $('#myimage') на $('#' + $(input).data("preview")).

Как это:

<div class="span12"> 
    <span class="btn btn-default btn-file"> Browse 1 <input type="file" onchange="readURL(this);" data-preview="myimage"></span> 
      <span class="btn btn-default btn-file"> Browse 2 <input type="file" onchange="readURL(this);" data-preview="myimage2"></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> 


<script> 
function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#' + $(input).data("preview")).css('background', 'transparent url('+e.target.result +') left top no-repeat'); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 
</script>