[javascript/jquery] 자바스크립트 filereader 사용예제

[javascript/jquery] 자바스크립트 filereader 사용예제

 

 

javascript에서 동기방식으로 이미지 업로드 구현하는경우,

 

선택한 이미지를 사용자 화면에 미리 보여줘야 되는 경우가 있습니다.

 

그럴때 사용할수 있는 샘플 소스입니다.

 

<input type='file' name='upload_image[]' id="upload_img">
<script>
var file_input = document.querySelector('#upload_img');
file_input.addEventListener('change', function (event) {

  var fileList = file_input.files;
  var file = fileList[0];

  var reader = new FileReader();
  reader.onload = function (e) {
      console.log(e.target.result);
  }
</script>

 

위 내용을 보시면 아시겠지만,

 

input file 에서 파일이 선택되면 onchange 가 동작하여 

 

file 객체를 담아서 filereader 를 호출 및 이미지를 계산하게 됩니다.

 

console.log 부분에 담겨있는 e.target.result 는 이미지 url 을 표시할때 사용하시면 됩니다.

 

사용전 테스트를 해보시고 수정하셔서 반영하셔야 할수도 있습니다!

 

참고하세요!