안녕하세요 워누입니다! 

오늘은 PHP로 이미지 파일을 업로드하는 방법을 포스팅하도록 하겠습니다!

거두절미하고 바로 가보도록 하죠~

.

여러분들도, 저도 인터넷에서 사진이나 문서 파일을 웹에서 업로드한 경험이 있을 것입니다!

이런 폼을 html에서 제공하는데요,

html 폼에서 파일을 업로드하기 위해서는 <input> 태그 내 type 속성 값으로 "file"을 사용하고, 

<form> 태그에 enctype 속성을 적용하고 값으로 "multipart/form-data"를 지정해야 합니다.

 

아래 예시코드처럼 작성을 해주시면 됩니다. 

(편의를 위해서 구분선을 작성했습니다!)

.

[fileUploadRequest.html]

<!DOCTYPE html>
<html>
<head>
</head>
<title>파일 업로드 테스트</title>
<body>
<form name="reqform" method="post" action="fileUploadResult.php" enctype="multipart/form-data"> 
 <p>이미지 파일 업로드 테스트</p>
 <hr> <br>
 <input type="file" name="imgFile" /><br>
 <input type="submit" value="업로드" />
</form>
</body>
</html>

.

이렇게 html로 요청 폼을 만들었으면 요청을 받는 응답 페이지도 만들어주어야 겠죠?

PHP에서는 파일을 어떻게 받아서 처리하는지 한번 보도록 합시다.

 

바로 PHP 응답 페이지 코드 보시죠!!

.

[fileUploadResult.php]

<?php 

/*********************************************
* 넘어오는 데이터가 정상인지 검사하기 위한 절차
* 실제 페이지에서는 적용 X
**********************************************/

//$_FILES에 담긴 배열 정보 구하기.
var_dump($_FILES);

// php 내부 소스에서 html 태그 적용 - 선긋기
echo "<hr>";

/*********************************************
* 실제로 구축되는 페이지 내부.
**********************************************/

// 임시로 저장된 정보(tmp_name)
$tempFile = $_FILES['imgFile']['tmp_name'];

// 파일타입 및 확장자 체크
$fileTypeExt = explode("/", $_FILES['imgFile']['type']);

// 파일 타입 
$fileType = $fileTypeExt[0];

// 파일 확장자
$fileExt = $fileTypeExt[1];

// 확장자 검사
$extStatus = false;

switch($fileExt){
	case 'jpeg':
	case 'jpg':
	case 'gif':
	case 'bmp':
	case 'png':
		$extStatus = true;
		break;
	
	default:
		echo "이미지 전용 확장자(jpg, bmp, gif, png)외에는 사용이 불가합니다."; 
		exit;
		break;
}

// 이미지 파일이 맞는지 검사. 
if($fileType == 'image'){
	// 허용할 확장자를 jpg, bmp, gif, png로 정함, 그 외에는 업로드 불가
	if($extStatus){
		// 임시 파일 옮길 디렉토리 및 파일명
		$resFile = "./img/{$_FILES['imgFile']['name']}";
		// 임시 저장된 파일을 우리가 저장할 디렉토리 및 파일명으로 옮김
		$imageUpload = move_uploaded_file($tempFile, $resFile);
		
		// 업로드 성공 여부 확인
		if($imageUpload == true){
			echo "파일이 정상적으로 업로드 되었습니다. <br>";
			echo "<img src='{$resFile}' width='100' />";
		}else{
			echo "파일 업로드에 실패하였습니다.";
		}
	}	// end if - extStatus
		// 확장자가 jpg, bmp, gif, png가 아닌 경우 else문 실행
	else {
		echo "파일 확장자는 jpg, bmp, gif, png 이어야 합니다.";
		exit;
	}	
}	// end if - filetype
	// 파일 타입이 image가 아닌 경우 
else {
	echo "이미지 파일이 아닙니다.";
	exit;
}
?>

이렇게 코드를 작성해보았습니다.

.

이전 PHP 포스팅에서 $_POST 필드를 이용해 form 태그의 method가 post인 data를 가져온 것을 볼 수 있습니다. 

즉, $_POST 필드는 요청 시 method 속성의 값이 post 방식인 데이터를 배열 형태로 가져온다는 것을 알 수 있습니다.

 

일반적인 데이터라면 $_POST 필드를 이용해 값을 가져왔겠지만, 파일 데이터는 조금 다릅니다. 

$_FILES라는 필드를 이용해 파일에 대한 데이터 값을 배열로 가져옵니다. 

 

자세한 내용을 설명드리기 위해 var_dump() 함수를 이용해 $_FILES 필드에 담긴 배열 데이터를 모두 print하였습니다. 

(PHP에서 데이터를 체크하기 위해 자주 사용하는 함수이니 꼭 알아두세요!!)

실행된 예시 화면을 보면서 조금 더 상세하게 설명드릴게요ㅎㅎ

.

1) fileUploadRequest.html 실행

fileUploadRequest.html 실행 화면

 

2) fileUploadRequest.html 페이지와 동일 경로 내 img 폴더 임의 생성

img 폴더 생성

 

빈 폴더

** 이미지가 업로드되는지 확인하기 위해 빈 폴더로 생성해 놓았습니다!

 

3) fileUploadRequest.html 페이지에서 "파일 선택" 버튼 클릭 후 첨부할 이미지 선택

첨부할 이미지 선택
"파일 선택" 버튼 옆에 선택한 이미지의 파일명이 체크됨.

 

4) fileUploadRequest.html 페이지에서 "업로드" 버튼 클릭 후 결과 확인

fileUploadResult.php 결과 화면

5) fileUploadResult.php 페이지에서 설정한 경로에 선택한 이미지가 업로드 되었는지 확인.

img 폴더 재확인, 선택한 파일이 업로드된 부분 확인.

.

이런 식으로 테스트가 진행되었습니다. 

 

1-3번 과정은 요청하는 페이지에 대한 과정이니 추가 설명을 생략하고, 바로 4번부터 상세하게 설명을 드리겠습니다. 

 

fileUploadResult.php 소스 내 9번째 라인에서 "var_dump($_FILES);"로 체크한 부분을 통해

파일 데이터가 어떻게 저장되어 넘어오는지 알수 있습니다. 

 

넘어온 데이터 형식을 보면 아래와 같은데요,


array(1) { ["imgFile"]=> array(5) { ["name"]=> string(10) "watch3.jpg" ["type"]=> string(10) "image/jpeg" ["tmp_name"]=> string(48) "C:\Bitnami\wampstack-7.2.14-0\php\tmp\phpFC9.tmp" ["error"]=> int(0) ["size"]=> int(367171) } }


imgFile이라는 배열 데이터 안에 name, type, tmp_name, error, size라는 필드들이 또 배열로 들어가 있는 것을 확인 할 수 있습니다. 아래 표를 통해 각 필드에 대한 설명을 드립니다. 

 

Field value
imgFile 요청 시 input 태그 내 name 속성으로 지정한 값을 그대로 받아옴.
Field in "imgFile" name 파일명
type 파일 타입과 확장자명을 받아옴 (구분자: /)
tmp_name 업로드한 파일을 임시로 저장할 폴더와 파일명
error 에러 여부
size 파일 사이즈 (단위: byte)

위 표에 대해서 인지를 하고 fileUploadResult.php 소스를 보시면 조금 더 이해가 되실 겁니다ㅎㅎ

다만 소스 내에서 언급한 것처럼 var_dump로 찍은 데이터는 어디까지나 개발할 때 데이터를 체크하기 위한 용도로 쓰기 때문에 만약 실제로 개발하실 때에는 위 데이터가 실제 서비스하는 페이지에서는 보이지 않게 반드시 주의해주세요!

 

다음부터는 주석을 참고하시면서 이런 의미구나 하고 소스를 이해해주시면 되겠습니다!

 

제작된 샘플 소스의 동작 구조는 임시로 저장된 파일경로를 변수에 담아두고 확장자를 검사해서 이미지 파일이 맞으면 

임시 파일 경로에 두었던 파일을 실제 서버 내 폴더에 업로드하고,

허용된 확장자를 쓰지 않았거나 이미지 파일이 아니라면 실패 처리를 알리는 문자열을 출력하는 형태로 구성됩니다!

 

이 소스에서 중요하게 사용된 함수는 아래 설명을 참고 바랍니다!

 

**

explode : PHP에서 하나의 구분자를 가지고 배열 데이터를 만드는 기능을 제공하는 함수

-> syntax : explode("구분자", "데이터");

 

move_uploaded_file : 임시적으로 업로드된 파일을 새로운 경로로 옮겨주는 기능을 제공하는 함수

-> syntax : move_uploaded_file("업로드한 파일의 임시 위치", "옮길 위치 및 파일명");

**

 

이렇게 제가 작성한 코드와 그에 대한 설명을 담아보았는데요. 

제가 드린 샘플 소스를 그대로 사용해도 좋지만 변형도 해보고,

일부러 다른 파일도 올려서 오류가 어떻게 나는지도 직접 시도해보는 것을 권장합니다!

 

저처럼 초보개발자라면 반드시 이렇게 직접 자신의 코드를 써보고, 설명해보고, 일부러 오류도 내보시면 

실력이 더 많이 향상될 것 같아요 ㅎㅎ

제 코드와 설명도 완벽하지는 않아서 언제나 피드백을 주시면 반영하도록 하겠습니다 ㅎㅎ 

 

오늘 포스팅은 여기서 마치도록 하겠습니다~

그럼 20000!!!

 

+ Recent posts