FileReader) 파일 프리뷰 만들기

 

여러 파일을 올리는 글은 여기에

https://hancoco.tistory.com/155?category=1035202 

[220331] multer) 비동기적으로 이미지 여러개 업로드하기

 

 

 

---

FileReader가 뭔지는 mdn에서는 이렇게 설명하는데 솔직히 뭐라고하는지 모르겠다.

대충 실질적으로 저장하지 않고 임시저장했다 치고 거기서 정보를 뽑아올 수 있게 만드는 용도인가봄.

( https://developer.mozilla.org/ko/docs/Web/API/FileReader )

 

 

 

 

프리뷰가 만들어질 html

<div id="uploadMany">
    <h2>파일 여러개 업로드</h2>
    <form
        action="http://localhost:4001/file/uploadMany"
        method="post"
        enctype="multipart/form-data"
    >
        <input type="file" id="fileMany" name="fileMany" multiple/>
        <input type="submit" value="파일업로드" />
    </form>
    
    <div id="listMany" style="margin-bottom:50px">
        <h3>이미지 프리뷰</h3>
        <ul style="display: flex;"></ul>
    </div>

 

 

 

 

 

프리뷰를 만들 자바스크립트 코드

input에 변화가 생기는것을 감지하고 이벤트를 실행시키도록 change이벤트를 걸어놓았다.

input에 파일이 생기면 프리뷰 리스트를 생성하도록 만들것이다.

 

input에 넣은 파일 리스트를 input.files로 받아온다.

하나씩 올라올 파일을 읽을때마다 FileReader 객체를 생성해준다.

객체가 생성되면 reader.readAsDataURL이 URL로 읽어오고, 성공한다면 reader.onload 메소드가 실행된다.

메소드에는 읽어온 URL을 img의 src에 넣어주는 코드를 작성했다. 

const uploadMany = document.querySelector("#uploadMany");
const input = uploadMany.querySelector("#fileMany");
const ul = uploadMany.querySelector("#listMany > ul");

input.addEventListener("change", (e) => {
  const fileList = input.files;

  for (let i = 0; i < fileList.length; i++) {
    let reader = new FileReader(); // FileReader 객체 생성
    reader.readAsDataURL(fileList[i]); // 업로드된 파일을 URL로 읽음
    
    reader.onload = (e) => {
      // 읽기 성공하면 실행될 메소드
      const li = document.createElement("li");
      li.innerHTML = `<img width="100px" height="100px" margin-right="10px" src="${e.target.result}">`;
      ul.append(li);
    };
  }
});

 

 

 

---

( 참고 블로그 : https://velog.io/@dosilv/Web-API-FileReader-FormData )