JS 업로드 이미지 미리 보기 기능 간단하게 구현

js 업로드 이미지 미리 보기 기능 을 실현 하 는 방향 은 업로드 이미지 로 컬 경 로 를 가 져 오고 페이지 에 불 러 와 업로드 미리 보 기 를 실현 하 는 것 입 니 다.
HTML 코드

<div class="upload">
    <input type="button" class="btn" onclick="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 코드

//         ，       ，  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);
    }
  })
})

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.