파일 첨부하기 <input type="file">

저는 웹페이지에서 사용자의 파일을 입력받기 위해 input 태그의 type을 file로 지정했습니다.

<input type="file">

공지사항

<tr>
		<td>파일</td>
		<td><input type="file" name="file1"></td>
	</tr>

상품등록

<tr>
		<td>파일</td>
		<td><input type="file" name="file1" id="file1">	
		
		</td>
		<td><input type="file" name="file2" id="file2">
		</td>
	</tr>

input 태그의 type을 file로 지정하면 사용자가 파일을 선택할 수 있도록 설정됩니다.

input type = "file"의 속성들

• accept
  입력받을 수 있는 파일의 유형을 지정하는 속성
  <input type="file" accept="image/jpeg,.txt">
  
  

- accept 뒤에는 확장자 명을 써준다.(여러 유형의 파일을 지정할 때는 ,로 구분)
- MIME 타입의 경우, text/plain, image/jpeg, audio/mpeg, image/* 등
- 속성을 지정하지 않으면 모든 유형의 파일을 입력받을 수 있다.

• capture
  accpet 속성에 이미지나 비디오를 입력받은 경우, 어떤 카메라를 사용할지 지정하는 속성
  <input type="file" accept="image/jpeg,.txt" capture="user">
  
  

- user : 전면카메라
- environment : 후면카메라

• files
  사용자가 파일을 선택하면 선택된 파일의 목록이 FileList로 객체 형태로 files 속성에 저장함

- 선택된 파일의 목록을 가져오려면 files 속성을 참조

• multiple
  사용자가 파일을 선택할 때 ctrl키나 shift키를 사용해 다중 선택을 가능하게 함
  <input type="file" multiple>

- boolean 값을 가짐

• required
  파일 선택을 필수로 지정하는 속성
  <input type="file" required>

- 파일을 선택하지않고 form을 submit하면 파일을 선택하라는 안내창이 나옴
- boolean 값을 가짐

• value
  사용자가 선택한 파일의 경로 값
  <input type="file">

- 파일이 여러개 선택됐으면 가장 첫번째 파일의 경로값을 가져옴
- 악의적인 사용을 방지하기 위해 모든 파일의 경로 앞에 'C:\fakepath\'가 포함됨