实现JS上传图片预览功能

html代码:

<div class="upload">

    <input type="button" class="btn" οnclick="browerfile.click()" value="上传">
    <input type="file" id="browerfile" style="display: none;" class="test">
    <div class="img_center">
      <img src="" class="img1-img">
    </div>

  </div>

JS：

<script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
<script>
//获取图片路劲的方法，兼容多种浏览器，通过createObjectURL实现
function getObjectURL(file){
  var url = null;
  if(window.createObjectURL != undefined){
    url = window.createObjectURL(file);//basic
  }else if(window.URL != undefined){
    url = window.URL.createObjectURL(file);
  }else if(window.webkitURL != undefined){
    url = window.webkitURL.createObjectURL(file);
  }


  return url;
}


//实现功能代码
$(function(){
  $("#browerfile").change(function(){
    var path = browerfile.value;
    var objUrl = getObjectURL(this.files[0]);
    if(objUrl){
      $('.img1-img').attr("src",objUrl);
    }
  })
})
</script>