Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
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
Archives
Today
Total
관리 메뉴

codingfarm

file upload 본문

web/HTML5

file upload

scarecrow1992 2020. 9. 30. 00:06

www.youtube.com/watch?v=XY5G4RN_LKg&list=PLuHgQVnccGMDUzDDCKW-pCZQY-MMCX5yB&index=27&t=1s

파일 업로드는 html보다는 서버측에서 해야할 일이 훨씬 많기에

html측면에서는 내용이 굉장히 추상적일수 밖에 없다.

그렇기에 여기서는 html쪽에서 해야할 부분만을 알아보는 방식으로 포스팅하겠다.

 

1
2
3
4
5
6
7
8
9
10
11
12
<html>
    <head>
        <meta charset = "utf-8">
    </head>
    <body>
        <!--서버환경 구축시에만 유용한 주소이다.-->
        <form action="http://localhost/upload.php" method="post" enctype="multipart/form-data">
            <input type = "file" name="profile">
            <input type = "submit">
        </form>
    </body>
</html>
cs

제출버튼을 누르면 사용자가 선택한 파일은 upload.php라는 php어플리케이션이

이 파일을 받아서 컴퓨터에 저장하게된다.

이는 php뿐만 아니라 파이썬, 루비등도 마찬가지다.

 

form태그에서 method는 post로 설정하고 enctype도 위 코드처럼 설정해줘야한다.

그리고 input태그에서 name을 "profile"로 설정한다.

이는 사실상 서버 개발자의 요청이라 보면된다.

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
$source = $_FILES['profile']['tmp_name'];
$dest="./".basename($_FILES['profile']['name']);
move_uploaded_file($source,$dest);
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <img src="<?=$_FILES['profile']['name']?>"alt=""/>
    </body>
</html>
cs

파일을 받기 위한 php파일의 코드는

우리가 업로드한 파일을 받아서 서버내의 특정 디렉터리로 이동한 역할을 한다.

업로드 버튼을 누르면 아래에 있는 HTML에 맞는 새로운 창이 그려지며

FILES의 'profile'에 업로드 했던 파일의 이름이 들어가고 해당 이미지가 새창에 띄워진다.

'web > HTML5' 카테고리의 다른 글

semantic  (0) 2020.10.01
meta  (0) 2020.09.30
form : method  (0) 2020.09.29
label  (0) 2020.09.28
hidden  (0) 2020.09.27
Comments