[JS]이미지 업로드 미리보기(프리뷰)

https://sinna94.tistory.com/entry/JavaScript-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%93%9C-%EB%AF%B8%EB%A6%AC%EB%B3%B4%EA%B8%B0-%EB%A7%8C%EB%93%A4%EA%B8%B0

JavaScript - 이미지 업로드 미리보기 만들기

 

[JavaScript] .attr(), .removeAttr() (tistory.com)

[JavaScript] .attr(), .removeAttr()

 

이미지 첨부 프리뷰 구현, onchange 함수 (tistory.com)

이미지 첨부 프리뷰 구현, onchange 함수

 

 

여기서 file type은

fileList 객체를 가지고 있는데

접근할떄는 .fies로 접근하면 된다.

 

단 list라고 착각해서 

add나 push하면 안되며 만약에 덮어쓴다면

var DataForm = new DataTransfer();

객체를 만들어야 한다.

 

# 넣을때

 dataTransferItemList.items.add(document.querySelector("#img"+idx).files[0]);

+

# 덮어씌울떄

  document.querySelector('#file-input').files = dataTransferItemList.files;

 

혹은

file 타입은 파일 및 사진을 선택할 때마다 기존 선택 파일은 덮어씌워지기 때문에 유지하면서 추가하고 싶다면

전역변수 배열을 생성한뒤  담아서 

위와 같은 방법을 활용해서

조회후 담아서 덮어씌워주자.