javascript - upload multiple images into different divs -


i have 2 buttons, want both upload 2 different files , display these inside of 2 different divs. code works fine 1 image. how modify code able handle 2 images? thanks!

my code @ moment is:

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> 

add data-preview="preview_div_id" each input. in onload function should replace $('#myimage') $('#' + $(input).data("preview")).

like this:

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

Comments

Popular posts from this blog

python - No exponential form of the z-axis in matplotlib-3D-plots -

php - Best Light server (Linux + Web server + Database) for Raspberry Pi -

c# - "Newtonsoft.Json.JsonSerializationException unable to find constructor to use for types" error when deserializing class -