IT/web개발

html5 다중파일 처리 여러개의 파일 업로드폼 처리

미르오키드 2014. 7. 3. 16:40
반응형

파일 작성폼 태그는   <input type="file" name="attach_file"  > 이런식으로 구성되어 있습니다.

 

태그를 IE 브라우저에서 실행해보면 스타일이 적용되지 않은 기본 구성일 경우 아래와 같이 나오죠.

 

 

 

찾아보기 버튼을 클릭하면 파일선택팝업이 나오는데 이때 선택할 수 있는 파일은 한 개로 제한되어 있습니다.

 

따라서 여러개의 파일을 동시에 전송하기위해서 등록가능 파일개수만큼 파일태그를 구성하거나 파일태그를 동적으로 여러개 생성하는 등 스크립트를 이용한 구현이 필요했습니다.

 

html5에서는 추가된 속성인 multiple 이란 속성만 추가해 주면 하나의 파일태그에서 여러개의 파일이 등록가능해집니다.

다만 파일리스트를 볼수 없다는 점은 결국 추가적인 구현이 필요하겠다는 생각이 드네요. 콤보리스트등과 간다하게 연동할 수 있는

방법이 있는지는 확인해 봐야 할거 같습니다.

 

<input type="file"  name="attach_file"  multiple/>

 

아래는 크롬브라우져에서 여러개의 파일을 등록한 모습입니다.  파일개수만 친절하게? 안내해준다는..

하나만 입력하면 파일명이 나옵니다.

 

 

 

 

반응형