항상 혼란스러워서 정리하고 싶어요.

전제 조건

<input type=file name=logo_image /> <!-- （１） -->
<figure id=thumb_logo_image><img/></figure> <!-- （２） -->
<input type=hidden name=remove_logo_image value=on /> <!-- （３） -->
<button id=btn_remove_logo_img /> <!-- （４）-->

이런 요소가 있다면

저장된 파일이 있으면 (2)에 및 수

표시

파일을 선택하면 JS에서도 (2) Samne 설정

※ 서버에 아직 전송되지 않은 상태

값을 remove_属性名 로 설정하여 보내면 저장된 파일을 삭제할 수 있습니다.

삭제 필드에 값이 있는 상태에서 새 파일을 보내도 새 파일로 잘 바뀔 수 있음

삭제용 버튼을 눌렀을 때 (2) 및 수, (3) 삭제용 필드, (4) 삭제용 버튼이 HTML에서 사라진 경우

상태의 세척

저장된 파일이 있는지 여부

새 파일 선택 여부

파일 선택 대화 상자를 보낸 후 취소 단추로 돌아갈지 여부

삭제 버튼이 눌렸는지 여부

삭제 버튼을 누른 후 파일 선택 여부

저장된 파일이 있는 상태에서 새 파일을 선택했지만 새 파일이 취소되었을 때

상태 변수 추출

Object savedValue

저장된 파일

String savedValueUrl

저장된 파일의 축소판용 URL

Object inputValue

새로 선택한 파일

※ (1) 파일 필드의value 값

※ 파일 필드의 규격에 따라 JS는 재설정할 수 없으며, 리셋(null의 대입)

만 가능합니다.

String inputValueUrl

새로 선택한 파일의 축소판용 URL

Bool thumbVisible

(2) 표시 및 수 여부

String thumbSrc

(2) 하위 레이블에 설정된 값

savedValueUrl or inputValueUrl

Bool readyToRemove

(3) 저장된 파일 삭제 여부

Bool removeBtnVisible

(4) 삭제 버튼 표시 여부

상태 확인표

이 줄의 재부팅과 조작을 반복하면 동작이 완성된 구상을 확인한다

※ null 및 false의 단원은 생략됩니다.못생겨져서

(1).. inputValue

(2).. thumbSrc 겸 thumbVisible

(3).. readyToRemove

(4).. removeBtnVisible

저장된 파일이 없으면

작업
(1)　
(2)
(3)
(4)
초기 상태
파일이 선택됨
ObjectinputValueUrltrue
파일을 선택한 후 삭제 버튼을 눌렀습니다.
파일을 선택한 후 파일 선택을 다시 열지만 취소 를 누르십시오

저장된 파일이 있는 경우

작업
(1)
(2)
(3)
(4)
초기 상태savedValueUrltrue
삭제 버튼 누르기
true
파일이 선택됨
ObjectinputValueUrltrue
파일 선택 열기, 취소 누르기savedValueUrltrue
삭제 버튼을 누른 후 파일을 선택했습니다.
ObjectinputValueUrltrue
파일을 선택한 후 삭제 버튼을 누릅니다.savedValueUrltrue
파일을 선택한 후 삭제 버튼을 누른 다음 삭제 버튼을 다시 누릅니다.
true
파일 선택 후 삭제 버튼을 누르고 파일 선택을 다시 열지만 취소 버튼을 누르면savedValueUrltrue

끝내다

아, 너무 귀찮아.