11.1 <input type="file"> 요소
웹 애플리케이션은 종종 사용자들에게 서버로 파일을 업로드하도록 요구해. 이건 문서, 이미지, 비디오, 다른 데이터 타입들을 업로드할 때 유용할 수 있어. HTML은 파일 업로드 인터페이스를 만들기 위해 <input type="file"> 요소를 제공해. 아래에서 이 요소와 multiple, accept 같은 속성들을 자세히 살펴볼 거야.
<input type="file"> 요소는 사용자들이 기기에서 파일을 선택하고 서버에 업로드할 수 있도록 하는 인터페이스 요소를 만들어. 이건 HTML 폼의 주요 요소 중 하나로, 웹 애플리케이션에 파일 업로드 기능을 통합할 수 있어.
<input type="file"> 요소의 주요 속성
type="file"— 요소가 파일 선택을 위한 것임을 정의해.name— 폼 데이터를 서버로 전송할 때 사용될 요소의 이름을 설정해.multiple— 사용자가 여러 파일을 동시에 선택할 수 있도록 해줘.accept— MIME 타입이나 파일 확장자를 사용해서 선택할 수 있는 파일 타입을 지정해.
<input type="file"> 요소 사용 예제
간단한 예제
추가 속성이 없는 가장 심플한 파일 업로드 요소 예제:
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="file">파일 선택:</label>
<input type="file" id="file" name="file">
<button type="submit">업로드</button>
</form>
11.2 multiple 속성
<input type="file"> 요소는 기능을 확장하는 여러 속성을 지원해. 그 중 두 가지: multiple과 accept를 살펴보자.
multiple 속성은 사용자들이 여러 파일을 업로드할 수 있게 해줘. 이 속성을 추가하면, 사용자들은 파일 선택 창에서 여러 파일을 선택할 수 있어.
사용 예제:
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="files">파일 선택:</label>
<input type="file" id="files" name="files" multiple>
<button type="submit">업로드</button>
</form>
파일 선택 창에서, 사용자는 Ctrl (Mac에서는 Cmd) 또는 Shift 키를 눌러 동시에 여러 파일을 선택하고 업로드할 수 있어.
11.3 accept 속성
accept 속성은 사용자가 선택할 수 있는 파일 타입을 제한해. 이건 사용자들이 허용된 파일 타입(예: 이미지나 문서)만 업로드하도록 보장하기 위해 유용해.
사용 예제:
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="image">이미지 선택:</label>
<input type="file" id="image" name="image" accept="image/*">
<button type="submit">업로드</button>
</form>
accept 속성은 선택할 수 있는 파일 타입을 제한해. 이건 MIME 타입이나 파일 확장자를 통해 할 수 있어. 위의 예제에서 사용자는 이미지 파일만 선택할 수 있어.
accept 속성 값의 예제
파일 타입 제한:
accept="image/*": 모든 이미지accept="video/*": 모든 비디오 파일accept="audio/*": 모든 오디오 파일
파일 확장자 제한:
accept=".jpg/.jpeg/.png": JPEG 및 PNG 형식의 이미지만accept=".pdf/.doc/.docx": PDF 및 워드 문서만
11.4 클라이언트 측에서 파일 처리
때때로 서버로 전송하기 전에 클라이언트 측에서 파일을 처리해야 할 때가 있어. 예를 들어, 이미지를 미리보기로 보여주거나 파일의 크기를 확인할 수 있어. 이를 위해 JavaScript를 사용해.
이미지 미리보기 예제:
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="image">이미지 선택:</label>
<input type="file" id="image" name="image" accept="image/*">
<div id="preview"></div>
<button type="submit">업로드</button>
</form>
document.getElementById('image').addEventListener('change', function(event) {
const preview = document.getElementById('preview');
preview.innerHTML = '';
const files = event.target.files;
for (let i = 0; i < files.length; i++) {
const file = files[i];
const reader = new FileReader();
reader.onload = function(e) {
const img = document.createElement('img');
img.src = e.target.result;
img.style.maxWidth = '200px';
preview.appendChild(img);
}
reader.readAsDataURL(file);
}
});
설명
FileReader: 클라이언트 측에서 파일 내용을 읽는데 사용돼reader.onload: 파일이 완전히 읽혔을 때 실행되는 이벤트reader.readAsDataURL(file): 파일을 읽고 그것을 Data URL로 인코딩하여<img>태그에 표시할 수 있게 해줘
GO TO FULL VERSION