[JavaScript] 클라이언트에서 input File에 올린 사진 띄우기

<article>

  <div id="holder"></div>

  <p id="status" style="display: none;"> </p>

  <p><input type=file></p>

</article>

<script>

var upload = document.getElementsByTagName('input')[0],

    holder = document.getElementById('holder'),

    state = document.getElementById('status');

if (typeof window.FileReader === 'undefined') {

  state.className = 'fail';

} /* else {

  state.className = 'success';

  state.innerHTML = 'File API & FileReader available';

} */

 

upload.onchange = function (e) {

  e.preventDefault();

  var file = upload.files[0],

      reader = new FileReader();

  reader.onload = function (event) {

    var img = new Image();

    img.src = event.target.result;

   img.style.height = '160px';

   img.style.width = '120px';

    holder.innerHTML = '';

    holder.appendChild(img);

  };

  reader.readAsDataURL(file);

  return false;

};

</script>

위 코드를 가져다가 알맞게 바꿔서 사용하면 가능