◆JavaScript/활용

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

쿠키린 2023. 4. 14. 16:28

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 - 이미지 업로드 미리보기 만들기

input 태그에서 선택한 이미지를 화면에 바로 출력하도록 해보자. 코드 input 태그에서 onchange 속성에 실행될 메소드를 정해줍니다. 메소드 내에서 FileReader 객체를 생성하고 onload 됐을 시 발생할 이

sinna94.tistory.com

 

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

 

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

.attr() : 속성 추가 .removeAttr(속성명) : 선택한 요소의 특정 속성을 제거 이미지 첨부 프리뷰를 구현하면서 img 태그에 attr로 src 속성에 경로 값을 넣어 이미지를 보이게 했었다. if (this.files[0]) { var r

60cod.tistory.com

 

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

 

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

참고: https://zxchsr.tistory.com/81 https://kkamikoon.tistory.com/entry/Javascript-onchange-%EC%9D%B4%EB%B2%A4%ED%8A%B8%EB%A1%9C-%EB%82%B4%EC%9A%A9-%EB%B3%80%EA%B2%BD-%EA%B0%90%EC%A7%80 키워드 onchange FileReader readAsDataURL target.result 엑스 박

60cod.tistory.com

 

 

여기서 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 타입은 파일 및 사진을 선택할 때마다 기존 선택 파일은 덮어씌워지기 때문에 유지하면서 추가하고 싶다면

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

위와 같은 방법을 활용해서

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

저작자표시 동일조건 (새창열림)