티스토리 뷰

WEB2.0

HTML5로 간단하게 멀티업로드 구현하기

나를찾는아이 2011. 4. 12. 10:30
728x90
반응형
웹에서의 파일 업로드는

<input type="file" name="upload" />


이 코드를 이용하여 한번에 하나씩의 파일을 선택하여 전송할수 있습니다.

멀티업로드, 즉 여러개의 파일을 한꺼번에 업로드 할 수 있는 다중업로드 기능은

플래시의 도움을 받아 꼼수로 가능했던 영역이었습니다.



그러나 이제는 HTML5를 활용하여 아주 쉽고 간단하게 멀티업로드를 구현할 수 있게 되었습니다.


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5 Multiple File Upload</title>
</head>
<body>
    <form action="test.php" method="post" enctype="multipart/form-data">
        <input type="file" value="" name="upload[]" multiple>
        <input type="submit" value="submit">
    </form>
</body>
</html>


코드는 기존의 코딩과 큰 차이가 없습니다.

다만 업로드 파일의 정보를 배열형태로 받기 위해 name="upload[]"를 썼고

추가 속성으로 multiple 속성을 넣었습니다.


자 이제 이 파일을 열고 첨부를 해보시면

탐색기에서 2개 이상의 파일이 선택가능해지는 것을 발견할 수 있습니다.

첨부파일을 업로드 하고 서버측에서 처리하는 방법 역시 크게 다르지 않습니다.


<pre>
<?php
     print_r($_FILES);
?>
</pre>


이 파일업로드 방법은

최신의 파이어폭스, 크롬, 사파리 브라우저에서 모두 동작합니다.

단 IE는 버전에 상관없이 동작하지 않습니다.


오페라는 동작하긴 하는데 약간 다른 부분이 있습니다.

서버측언어가 PHP라고 가정할때

파이어폭스, 크롬, 사파리는 $_FILES 변수에 첨부파일의 정보가 담겨있는데

오페라의 경우 $_POST변수에 저장됩니다.

즉 $_FILES['upload']로 받는 것을 $_POST['upload']로 받아야합니다.



오페라 11.10 버전에서는 $_FILES변수로 된다고 하는데

아직 베타버전이라 저도 테스트는 못해봤네요.


멀티 업로드 구현이 조금 작업난이도가 있는 일이었는데

좀 더 구현이 쉬워졌습니다.(다만 오페라 때문에 약간의 추가로직이 필요합니다.)


개발자와 사용자 모두가 편해지는 그 세상에 어서 오길....

728x90
반응형

'WEB2.0' 카테고리의 다른 글

페이스북 페이지를 만드는 가장 쉬운 방법 소시지  (0) 2012.07.18
PHP로 C2DM 구현하기  (0) 2011.04.29
php를 이용한 쉽고 간단한 엑셀파일 생성하기  (0) 2010.05.15
애플은 우리에게 브라우저 선택권을 달라  (3) 2010.03.25
Web Developer Toolbar 크롬용 출시  (0) 2010.03.25
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함