업로드한 이미지를 미리보고싶은 경우 사용하는 FileReader API

html

<input type='file' accept='image/*' onchange='openFile(event)'></br>
<img id='output'>

js

<script>
  var openFile = function(event) {
    var input = event.target;

    var reader = new FileReader();
    reader.onload = function(){
      var dataURL = reader.result;
      var output = document.getElementById('output');
      output.src = dataURL;
    };
    reader.readAsDataURL(input.files[0]);
  };
</script>

 

저같은 경우는 가끔 업로드 후에 바로 이미지를 보고싶다 하시는 경우가 있어서 구글링을 해서 찾았던거로 가끔 사용합니다. 

 

변경하실 부분은 output 아이디값만 변경해주시면 됩니다. 

 

<script>
  var openFile = function(event) {
    var input = event.target;

    var reader = new FileReader();
    reader.onload = function(e){
      var dataURL = reader.result;
      var output = document.getElementById('output');
      output.src = dataURL;
    };
    reader.readAsDataURL(input.files[0]);
  };
  
  => 이렇게 바꾸셔도 됩니다. 
  
  <input type='file' accept='image/*' id="input" ></br>
  <img id='output'>
  
  function readFile(input){
  	var reader = new FileReader();
    
    reader.onload = function(e){
    	$('#output').attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
  }
  
  $("#input").change(function(){
    readFile(this);
  });
</script>

 

참고사이트

https://www.javascripture.com/FileReader

FileReader JavaScript API