PHP에서 Fetch API를 사용하여 JavaScript로 파일 업로드

먼저 다음 HTML 입력 파일 필드를 웹사이트에 추가합니다.

<input type="file" name="sample_image" />

이 아래에 하나의 분할 태그를 생성해야 하며 이 태그 아래에 유효성 검사 오류를 표시하거나 이미지 파일을 업로드합니다.

<div class="text-center" id="uploaded_image"></div>

웹사이트에 출력을 위한 파일 태그와 하나의 분할 태그를 추가한 후, 다음으로 로컬 컴퓨터에서 파일을 선택했을 때 트리거될 입력 파일 태그에 이벤트 리스너를 추가하려고 합니다.

const sample_image = document.getElementsByName('sample_image')[0];

sample_image.addEventListener('change', () => {

	upload_image(sample_image.files[0]);

});

파일 선택 시 이벤트 리스너를 추가한 후 upload_image() 함수를 호출하므로 PHP 스크립트를 사용하여 선택한 파일을 서버에 업로드할 upload_image() 함수를 만들어야 합니다.

업로드하기 전에 파일 형식 및 크기 확인

파일을 서버에 업로드하기 전에 먼저 파일을 업로드하기 전에 파일 유형과 파일 크기를 확인하고 싶습니다. 따라서 이 예에서는 .jpg 및 .png 파일 형식 이미지만 서버에 업로드하려고 하며 이미지 파일 크기는 2MB를 초과해서는 안 됩니다. 그래서 우리는 다음과 같은 자바스크립트 코드를 작성했습니다.

const upload_image = (file) => {

	if(!['image/jpeg', 'image/png'].includes(file.type))
	{
		document.getElementById('uploaded_image').innerHTML = '<div class="alert alert-danger">Only .jpg and .png image are allowed</div>';

		document.getElementsByName('sample_image')[0].value = '';

		return;
	}

	if(file.size > 2 * 1024 * 1024)
	{
		document.getElementById('uploaded_image').innerHTML = '<div class="alert alert-danger">File must be less than 2 MB</div>';

		document.getElementsByName('sample_image')[0].value = '';

		return;
	}
        ............
}

 

선택한 파일 유형과 파일 크기가 검증되면 이 자바스크립트는 파일을 서버로 보내기 위해 선행되어야 합니다. 따라서 여기에서 서버로 파일을 보내기 위해 FormData 인터페이스를 사용 하고 이 아래에 선택한 파일을 저장합니다. 여기에서 서버로 파일 보내기를 위해 파일을 서버로 보내고 이미지 업로드 성공 시 표시되는 JavaScript fetch() API를 사용 합니다. 웹 페이지에 업로드된 이미지.

const upload_image = (file) => {

	// check file type

	if(!['image/jpeg', 'image/png'].includes(file.type))
	{
		document.getElementById('uploaded_image').innerHTML = '<div class="alert alert-danger">Only .jpg and .png image are allowed</div>';

		document.getElementsByName('sample_image')[0].value = '';
		
        return;
    }

    // check file size (< 2MB)
    if(file.size > 2 * 1024 * 1024)
    {
    	document.getElementById('uploaded_image').innerHTML = '<div class="alert alert-danger">File must be less than 2 MB</div>';

    	document.getElementsByName('sample_image')[0].value = '';
        return;
    }

    const form_data = new FormData();

    form_data.append('sample_image', file);

    fetch("upload.php", {
    	method:"POST",
    	body : form_data
    }).then(function(response){
    	return response.json();
    }).then(function(responseData){

    	document.getElementById('uploaded_image').innerHTML = '<div class="alert alert-success">Image Uploaded Successfully</div> <img src="'+responseData.image_source+'" class="img-thumbnail" />';

    	document.getElementsByName('sample_image')[0].value = '';

    });

    
}

PHP를 사용한 서버 측 처리 파일 업로드

이 예에서는 서버 측에서 파일 업로드를 처리하기 위해 PHP 스크립트를 사용합니다. 그래서 여기에 우리는 upload.php 파일에 PHP 스크립트를 작성했습니다 . 이 파일은 서버에 파일 업로드 요청을 받습니다. 이 스크립트는 $_FILES 변수에서 선택한 파일 속성을 가져온 다음 PHP move_uploaded_file() 함수를 사용하여 이미지 폴더에 파일을 업로드한 후 가져옵니다.

if(isset($_FILES['sample_image']))
{

	$extension = pathinfo($_FILES['sample_image']['name'], PATHINFO_EXTENSION);

	$new_name = time() . '.' . $extension;

	move_uploaded_file($_FILES['sample_image']['tmp_name'], 'images/' . $new_name);

	$data = array(
		'image_source'		=>	'images/' . $new_name
	);

	echo json_encode($data);

}

결론

그래서 이 튜토리얼에서 우리는 FormData Object와 JavaScript Fetch API의 조합이 우리의 파일 업로드 작업을 매우 쉬운 방법으로 구현하는 것을 보았습니다. 그리고 두 가지 모두의 도움으로 우리는 사용자 경험을 증가시키기 위해 전체 페이지를 다시 로드하는 것을 피할 수 있습니다. 따라서 Fetch API를 사용하면 PHP 스크립트로 웹 페이지를 새로 고치지 않고 이미지를 업로드할 수 있으며 여기에서는 JavaScript Fetch API를 사용하여 HTTP 요청을 수행하고 FormData 개체를 사용하여 파일을 서버에 보내고 PHP 스크립트를 사용하여 파일을 업로드할 수 있습니다.