Image Preview function by javaScript when we upload image by php

Image Preview by JavaScript

Html Code
----------------------------------
<div class="showpreloadimage">
   <img id="showimageurl1" width="100%">
</div>

<input type="file" class="filestyle" name="team_image" data-placeholder="No file" id="postimage1" onchange="upload_teamimage(this)" tabindex="-1" style="position: absolute; clip: rect(0px 0px 0px 0px);">
<div class="bootstrap-filestyle input-group">
    <input type="text" class="form-control " placeholder="No file" disabled="">
    <span class="group-span-filestyle input-group-btn" tabindex="0">
        <label for="postimage1" class="btn btn-default ">
            <span class="icon-span-filestyle glyphicon glyphicon-folder-open"></span>
            <span class="buttonText">Choose file</span>
        </label>
    </span>
</div>

javaScript Code
-------------------------------
function upload_teamimage(postimage,target) 
{
  var fr = new FileReader();
  fr.onload = function(e) { target.src = this.result; };
  postimage.addEventListener("change",function() {
    fr.readAsDataURL(upload_src.files[0]);
  });
}
var upload_src = document.getElementById("postimage1");
var showimage_url = document.getElementById("showimageurl1");
upload_teamimage(upload_src,showimage_url);