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
Post a Comment