input file 다중 파일 / 이미지

input 태그를 통해 다중 파일을 전송하고 싶을떄는 이거하나면  됩니다.

multiple

<input type="file" name="file" id="file" multiple>

 

이때 이미지 와같이 특정 확장자나 특정 파일로 한정시키고싶을땐

<input type="file" accept=".xls,.xlsx" /> <!-- xls,xlsx 만 허용 -->
<input type="file" accept=".png,.jpg" />  <!-- png, jpg 만 허용 -->

<input type="file" accept="image/*" /> <!-- 모든 이미지 type 허용 --> 
<input type="file" accept="audio/*" /> <!-- 모든 오디오 type 허용 --> 
<input type="file" accept="video/*" /> <!-- 모든 비디오 type 허용 --> 

이와 같이 하면됩니다.

 

하지만 사용자가 직접 파일선택시 모든 파일을 선택하는것을 막을 순 없기떄문에

클라이언트단(js)과 서버단(jsp, .net, php, ruby 등등)에서 모두 체크를 시행해줘야합니다.