[JavaScript] input file 사진파일 미리보기 추가

웹개발을 할 때 파일업로드를 할 일이 생기면 보통 input type='file' 이걸 쓴다.

파일을 추가하게 되면 오른쪽에 파일 이름이 나타난다.

사진의 경우 업로드를 하기전에 미리보기가 나오면 보기에 좋아보일 것 같았다.

사진을 추가하는 순간 업로드가 이루어져 서버에 업로드된 파일을 미리보기로 보여주는 방법도 있지만 사용자가 잘못된 파일을 선택하여 불필요한 업로드가 이루어질 가능성이 있기 때문에 서버를 거치지 않고 미리보기를 보여주는 것이 좋은 방법이라고 생각했다.

방법을 찾아보니 방법이 있었다.

 

참고로 예제에 vue.js와 jQuery를 약간 끼얹었다.

 

<script src="https://unpkg.com/vue@2.6.6/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='result'>
  <input type='file' id='uploadFile' multiple='multiple'/><br/>
  <table class="table">
    <tr>
      <th>미리보기</th>
      <th>파일명</th>
      <th>파일크기</th>
    </tr>
    <tr v-for="item in fileList">
      <td><img v-bind:src="item.url" style='height:80px;width:80px;'/></td>
      <td>{{item.name}}</td>
      <td>{{item.size}}</td>
    </tr>
  </table>
</div>
<script>
  var uploadApp = new Vue({
    el: '#result',
    data: {
      fileList: []
    }
  })
  $("#uploadFile").change(function(event){
    console.log($(this)[0].files);
    var files = $(this)[0].files;
    uploadApp.fileList = [];
    $.each(files, function(i, item){
      var fileReader = new FileReader();
      fileReader.onload = function(e){
        var img = {
          url: e.target.result,
          name: item.name,
          size: item.size
        };
        uploadApp.fileList.push(img);
      }
      fileReader.readAsDataURL(item);
    });
  });
</script>

미리보기	파일명	파일크기
	{{item.name}}	{{item.size}}