HTML 수업

웹의 신체

HTML 수업 웹의 신체

파일전송

파일 업로드

업로드할 파일을 선택할 수 있는 컨트롤을 생성

문법

<input type="file" name="서버쪽에서 파일을 식별하기 위한 이름" />

예제

example1.html (jsfiddle, github)

<!DOCTYPE html>
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        </head>
        <body>
                <form action="example_receive.php" method="POST" enctype="multipart/form-data">
                    <input type="file" name="image" />
                    <input type="submit" />
                </form>
        </body>
</html>

example_receive.php (jsfiddle, github)

<!DOCTYPE html>
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        </head>
        <body>
                <?php
                $uploaddir = '/var/www/codingeverybody_html_tutorial/upload_75/';
                $uploadfile = $uploaddir . basename($_FILES['image']['name']);
                move_uploaded_file($_FILES['image']['tmp_name'], $uploadfile);
                ?>
                <img src="<?=$_FILES['image']['name']?>" />
        </body>
</html>

참고

댓글

댓글 본문
작성자
비밀번호
  1. NAMO
    감사합니다!
  2. 감사합니다!
  3. JustStudy
    고맙습니다
  4. 효니
    개발쪽은 모르지만 말씀해주시는 취지대로 흐름을 아니깐 더 감이 잘 오는 것 같아요 ㅎㅎㅎ 단순히 html만 배우는 것 보다 더 실제적이고 좋네요 ㅋㅋ
  5. ㅊㅇ
    ㅇㄹㄴㅇㄹㄴㅇㄹㅇㄴㄹㅇㄴㅇㅇ
    .
  6. 통조림
    저도 php설명하시는 부분에서 글씨가 작아져보이네여
    대화보기
    • 이승훈
      화면에 중간부터 작아져서 글씨가 잘 안보이네요~ 혹시 저만 그런가요;;
    • egoing
      예 파일을 서버 쪽에서 팔터링 할 수 있고요
      대화보기
      • femto
        안녕하세요 이고잉님
        질문에 대한 답변 정말 감사드려요!
        하나 더 질문해볼게요.
        이번에 이미지 파일을 업로드 했는데
        세상에는 많은 파일 종류가 있자나요.
        이미지파일에서도 여러가지가 있던데..
        음 제가 궁금한부분은 아무 종류여도 전부 업로드가 가능한가요?
      • 조은
        항상 감사합니다.

        이부분은 조금 난해하네요..일단 ㄱㄱ
      • 서현뿌뿌
        항상 강의 잘듣고 있습니다 감사합니다 ^.^
      • dennis
        저는 html 과 php가 유기적으로 어떻게 돌아가는지 예시를 보여주셔서 좋았는데...
        그 또한 html의 한 부분이며 향후 서비스를 운용하려면 부분만 봐선 힘들 거같더군요.
        저는 초심자로서 아주 감사한 부분입니다.

        부족한 디테일은 php강의에서 보충하면 되구요 :)
        감사합니다.
      • egoing
        오랜만에 보니까 강의가 개선의 여지가 있네요. 동영상에서는 서버 사이드 언어에 대한 공지가 있기는 합니다.
        대화보기
        • GNUNIX
          이거슨 PHP아닌가요.
          HTML강의에 들어와서 파일 업로드가 있길래
          HTML만으로 가능해진것인가? 했더니 역시나 PHP군요.
          HTML강의 페이지에 PHP내용이 (적정한 안내문 없이) 있다는것이 조금 부적절해보이는데
          어떻게 생각하시는지요?
        • 복된장마비
          잘 들었습니다~ php는 좀 어렵지만, 그래도 좋은 강의 감사합니다^^
        • 비트윈
          감사합니다^^ 이부분을 계속 이고잉님 말씀대로 넘어가다가 질문 한번 드려본겁니다.
          웹서버라..암튼 계속 질주하고 다시 돌아와서 이해가 되있으면 좋겠네요 ㅋㅋ 계속 강의는 이어지기를 바라고 고생하십니다 ^^!!!
          대화보기
          • egoing
            그건 아마도 .php 파일이 웹서버에 설치되지 않아서 일겁니다.
            일단 이해 안되는 부분은 언능 넘어가시고요.
            완주후에 아래 수업을 보시면 도움이 될꺼예요.
            http://opentutorials.org......488
            대화보기
            • 비트윈
              오늘도 수업잘 들었습니다. 점점 막히는 부분이 생기는 데요
              파일 전송 시 exampl_.receive.php 로 받는 부분이 잘 이해가 가지 않습니다.
              제가 사용하고 있는 aptana로 .php파일을 만들어봐도 제출될 때 보이지 않습니다.
              그러니까 example.html을 만들면 잘 나타나나
              exampl_.receive.php를 만들어도 제출을 클릭했을시 넘어가지가 않네요. 이해하셨을까요?
            • Hyunduk Yi
              잘 봤습니다. 감사~
            • egoing
              php파일을 html 내부로 로드하는게 아니고 서브밋 했을 때 php 파일로 데이터를 전송하라는 뜻입니다.
              2013년 6월 15일 토요일에 Disqus님이 작성:
              대화보기
              • kete3254
                수업 잘 들었습니다. 궁금한게 있는데요~ 왜 example1.html파일안에서 example_recieve.php파일이 쓰이잖아요? 근데 왜 제가 example_recieve.php이 없는데도 example1.html이 동작이 잘 되나요?? example_recieve.php파일이 기본적으로 제공되는 파일인가요?? 그렇다면 루트가 어떻게 되는지 궁금합니다. 감사합니다.
              • Guest
                수업 잘 들었습니다. 궁금한게 있는데요~ 왜 example1.html파일안에서 example_recieve.php파일이 쓰이잖아요? 근데 왜 제가 example_recieve.php이 없는데도 example1.html이 동작이 잘 되나요?? example_recieve.php파일이 기본적으로 제공되는 파일인가요?? 그렇다면 루트가 어떻게 되는지 궁금합니다. 감사합니다.
              • 감사합니다.
              • 상범 김
                화질이 좋지 않습니다.
              • eugene
                완전 이해하기 쉬워요~ 감사합니다^^
              • Jae Sung So
                잘 봤습니다.
              • Jmogoon
                수고하셨습니다.
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기