-
HTML5 UPLOADProgramming/HTML5 - CSS3 2017. 7. 8. 22:33반응형
파일업로드는 서버가 꼭 필요하기 때문에 저 같은 경우는 제 컴퓨터에 아파치 서버를 구축을 해 놓은 상태여서 이상없이 실습이 되는겁니다 지금은 php를 꼭 몰라도 되는 단계이니 그냥 이런 식이다 라고 이해 하시고 넘어가셔도 상관 없습니다.
실습코드(HTML5)
1234567<body><form action="upload.php" method="POST" enctype="multipart/form-data"><input type="file" name="profile"> <!-- 전달할때 이름이 있어야함 --><input type="submit"></form></body>cs 파일을 업로드할 때 필요한 html5 코드는 <input type="file" name=""> 입니다.
그리고 파일을 업로드를 할 때는 form 태그의 속성으로 method="post" 방식으로 그리고 enctype="mutiple/form-date"를 선언 해줘야 한다 여기에 대한 자세한 사항은 백엔드(서버) 개발자가 정하는 부분이므로 프론트엔드(클라이언트) 개발자는 알면 좋지만 그렇게 자세히는 몰라도 상관은 없다 궁금하면 찾아보시길 바란다.
실습코드(PHP)
1234567891011121314151617<?php$up = $_FILES['profile']['tmp_name'];$dest = "./".basename($_FILES['profile']['name']);move_uploaded_file($up,$dest);?><!-- 위의 php문은 업로드 한 파일을 받아서 서버쪽 컴퓨터에 특정한 디렉터리에 이동시키는 것 --><html><head><meta charset="utf-8"><title></title></head><body><img src="<?=$_FILES['profile']['name']?>" alt=""><!-- 업로드한 파일에 이름이 들어감 profile에 실습.jpg 라는 문자가 들어감 --></body></html>cs 실습 전(이미지 업로드 전) 폴더
실습 후(이미지 업로드 후) 폴더 - 업로드한 실습.jpg가 폴더에 생성이 되어 있다
'Programming > HTML5 - CSS3' 카테고리의 다른 글
HTML5 시맨틱(Semantic) 태그 (0) 2017.07.09 HTML5 META 태그 (0) 2017.07.09 HTML5 FORM 태그 (0) 2017.07.07 HTML5 테이블 태그 <table>, <td>, <tr>, <thead>, <tbody>, <tfoot> (0) 2017.07.07 HTML5 <p>태그 , <br>태그 (0) 2017.07.07
