<input type="file"> 검색영역(커스터마이징) - v2

원본 mozilla input[type="file"] : https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input/file

앞서 포스팅했던 http://lullu-lalla.tistory.com/19 은 업로드 하는 파일을 저장하는 변수도 없이 단순히 "파일명"만 노출이었는데

아래 Codepen으로 작업한 것은 mozilla에서 갖고온 내용으로/

구글번역 돌린 것도 아래 깨작깨작 이해가 조금이라도 되려면 남겨놔겠다 ㅜㅜ

See the Pen by seobin (@lullu-lalla) on CodePen.

각 File 객체에는 다음 정보가 포함됩니다.

- name: 파일명.

- lastModified: 파일이 마지막으로 수정된 날짜를 나타내는 숫자로, UNIX 타임 스탬프입니다.

- lastModifiedDate: 파일이 마지막으로 수정된 날짜와 시간을 나타내는 Date 객체입니다.

- size: 바이트 단위의 파일 크기를 나타내는 숫자.

- type: 파일의 MIME 유형을 나타내는 DOMString입니다.

스크립트의 첫 번째 줄에서 form input 자체에 대한 변수 값을 얻고 <div> 요소에는 .preview 클래스를 사용합니다. 

다음으로, 우리는 <input> 요소를 숨깁니다. 브라우저에서 디자인이 일관되지 않기 때문에 이 작업을 수행합니다. 

입력 요소를 <label>을 클릭하여 활성화 할 수 있으므로 입력을 시각적으로 숨기고 버튼처럼 레이블을 지정하는 것이 더 좋습니다. 

그러면 사용자는 파일을 업로드하려고 할 때 파일과 상호 작용할 수 있습니다.

다음으로, 선택된 값이 변경 될 때 (이 경우, 파일이 선택 될 때) 이벤트 리스너를 입력에 추가합니다.

이벤트 리스너는 사용자 정의 updateImageDisplay () 함수를 호출합니다.

updateImageDisplay () 함수가 호출 될 때마다 :

1. while 루프를 사용하여 <div class="preview">의 이전 내용을 비웁니다.

2. 선택한 모든 파일에 대한 정보가 들어있는 "FileList" 객체를 잡고 "curFiles"라는 변수에 저장합니다.

3. curFiles.length가 0과 같은지 확인하여 파일이 선택되지 않았는지 확인하십시오. 그렇다면 파일이 선택되지 않았 음을 나타내는 <div class="preview">에 메시지를 인쇄하십시오.

4. 파일이 선택되면 각 파일을 반복하여 <div class="preview">에 대한 정보를 인쇄합니다. 여기에서주의 할 사항 :

5. validFileType () 함수를 사용하여 파일의 유형이 올바른지 확인합니다 (예 : accept 속성에 지정된 이미지 유형).

6. 만약 그렇다면, 우리는 :

- 이름과 파일 크기를 <div class="preview"> (curFiles [i] .name 및 curFiles [i] .size에서 가져온 목록 항목)에 인쇄합니다. 

사용자 정의 returnFileSize () 함수는 바이트 / KB / MB 형식의 정교하게 형식화 된 버전을 반환합니다 (기본적으로 브라우저는 크기를 절대 바이트로보고합니다).

- window.URL.createObjectURL (curFiles [i])를 호출하고 CSS에서 이미지 크기를 줄인 다음 이미지를 목록 항목에 삽입하여 이미지의 미리보기를 생성합니다.

7. 파일 형식이 유효하지 않은 경우 사용자에게 다른 파일 형식을 선택해야한다는 메시지를 목록 항목에 표시합니다.