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
반응형