PHP JS AJAX를 이용한 파일 업로드 (비동기 파일 업로드)

예시 이미지로 쓸 게 없어가 썸네일용으로 걍 하나 만들었다.

 

일반적인 파일 업로드 플로우는 form 태그에 encType 속성 값을 multipart/form-data로 명시한 뒤 action 속성 값에 명시된 페이지에 form 태그 요소 값을 전송하여 서버에 요청하는 방식으로써 부득이하게 페이지 이동 또는 페이지 새로고침이 이루어질 수밖에 없다.

 

페이지 이동 또는 페이지 새로고침 없이 파일을 업로드 하고 싶을 때가 누구나 있기 마련이므로 그럴 때에는 비동기 전송방식 AJAX를 이용하여 파일을 업로드하는 소스코드를 사용하면 된다.

그럼 위 같은 파일 업로드를 위해서 필요한 페이지는 파일을 업로드 및 AJAX를 통해 서버로 파일업로드를 요청할 사용자 화면을 구성할 페이지 1과 1에서 AJAX 요청을 받아 서버로 파일을 업로드할 서버 프로그램 2가 필요하다.

 

각 1,2의 페이지 소스코드는 아래와 같다.

 

1. file 정보를 입력 받는 사용자 화면 마크업 및 JS 선언

<!-- $.ajax() 함수 사용을 위한 JQuery CDN 선언 -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> 
<script>
  function file_frm_submit(frm) {
    var fileCheck = frm.upload_file.value;		// 파일첨부체크
    if(!fileCheck) {					// 파일첨부가 없는 경우
      alert("업로드할 파일을 선택하세요.");		// --대화상자
      return false;					// --함수종료
    }
    var formData = new FormData(frm);			// 파일전송을 위한 폼데이터 객체 생성
    $.ajax({						// ajax
      url		: 'ajaxFileUpload.php',
      type		: 'POST',
      dataType	: 'html',
      enctype		: 'multipart/form-data',
      processData	: false,
      contentType	: false,
      data		: formData,
      async		: false,				// 비동기 방식을 비활성화, 일반적으로는 비권장 사항이다.
      success		: function(response) {
        if(response == "failed") {				// 파일업로드가 실패하면 서버에서 failed를 찍음
          alert("파일 업로드에 문제가 발생하였습니다."); 
          return false;						// --함수종료
        } else {						// 파일업로드가 성공한 경유
          alert("파일 업로드가 완료되었습니다.");		
          return true;
        }
      }
    });
  }
</script>

<form id="file_frm">
	<input type="file" name="upload_file" id="upload_file">
	<button type="button" name="upload_btn" onClick="file_frm_submit(this.form)">ajax 업로드<button>
</form>

 

 

2. file 업로드를 진행하는 서버 소스코드 (사용자 화면에서 ajax로 요청하는 ajaxFileUpload.php 파일)

<? 
if($_FILES['upload_file']['size'] > 0) { // 업로드 파일 사이즈를 체크하여, 업로드 파일여부를 확인

	$upfile_path	= "업로드 할 파일 경로 설정";
    // 파일명에 한글이 존재하는 경우 서버에서 파일명이 깨질 수 있기 때문에 서버가 인식할 수 있는 파일명으로 변환해줘야 한다.
	$file_name	= "파일이름설정.".pathinfo($_FILES['upload_file']['name'], PATHINFO_EXTENSION); // "파일이름설정."+파일 확장자
	$file_upload	= copy($_FILES['upload_file']['tmp_name'], $upfile_path."/".$file_name);

	if($file_upload == false)	echo "failed";

}

echo "failed";
?>