이미지 첨부 프리뷰 구현, 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

 

 

엑스 박스 버튼(u_cancel) 클릭 시

1) 이 버튼을 숨겨주고

2) 프리뷰 이미지를 숨겨주고

3) 프리뷰 이미지의 src 속성까지 뺏어주고(필터에 src 속성이 있냐 없냐를 따지니까 아예 없애주기)

4) 파일 첨부하는 숨은 input의 value를 없애준다. (파일 첨부 input은 value를 직접적으로 가져다가 써먹을 수는 없지만 그 값을 초기화시켜주는 건 가능하다.)

//프리뷰 없애고 첨부파일 없애기
$(".u_cancel").on("click", function() {
    $(this).hide();
    $(this).next("img").hide();
    $(this).next("img").removeAttr("src");
    $(this).next("img").next("div").show();
    $(this).parent().next("input").val("");
})