[php] PHP를 사용하여 파일 업로드 프로그레스 바 구현
파일 업로드 시 파일 크기가 크면 사용자는 업로드가 진행 중인지 알기 어려울 수 있습니다. 따라서 PHP를 사용하여 파일 업로드 시 프로그레스 바를 구현하는 방법을 알아봅시다.
1. HTML 파일 업로드 폼 생성
먼저 HTML에서 파일을 업로드하기 위한 폼을 생성합니다. 아래는 간단한 파일 업로드 폼의 예시입니다.
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" value="Upload file">
</form>
2. PHP로 파일 업로드 및 프로그레스 바 구현
이제 PHP를 사용하여 파일을 업로드하고 업로드 프로그레스를 구현해봅시다.
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['file'])) {
$targetDir = "uploads/";
$targetFile = $targetDir . basename($_FILES["file"]["name"]);
move_uploaded_file($_FILES["file"]["tmp_name"], $targetFile);
echo "File uploaded successfully!";
} else {
echo "No file uploaded!";
}
?>
위의 코드는 파일을 업로드하고 업로드 성공 여부를 알려주는 간단한 PHP 코드입니다.
3. AJAX를 사용하여 프로그레스 바 표시
프로그레스 바를 표시하기 위해 JavaScript와 AJAX를 사용할 수 있습니다. 아래는 AJAX를 사용하여 파일 업로드 프로그레스 바를 표시하는 예시 코드입니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$('form').on('submit', function(e){
e.preventDefault();
var formData = new FormData(this);
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
percentComplete = parseInt(percentComplete * 100);
console.log(percentComplete + '% uploaded');
if (percentComplete === 100) {
console.log('File uploaded!');
}
}
}, false);
return xhr;
},
type: 'POST',
url: 'upload.php',
data: formData,
cache: false,
contentType: false,
processData: false
});
});
});
</script>
</head>
<body>
<form>
<input type="file" name="file">
<input type="submit" value="Upload file">
</form>
</body>
</html>
위의 코드는 AJAX를 사용하여 파일 업로드 프로그레스를 감지하는 방법을 보여줍니다.
이제 파일 업로드 시 프로그레스 바를 구현하는 방법을 알게 되었습니다. 파일 업로드를 하는 웹 애플리케이션을 개발할 때 유용하게 활용할 수 있을 것입니다.