최신 웹 애플리케이션에서 파일 업로드는 일반적인 요구 사항이며 AJAX를 통한 파일 업로드는 더 부드러운 사용자 경험을 제공 할 수 있습니다. 사용자는 페이지를 새로 고치지 않고 파일 업로드를 완료 할 수 있으며 진행 상황이 너무 길어서 불확실성을 피하기 위해 진행률 표시 줄을 통해 실시간으로 업로드 진행 상황을 볼 수 있습니다.
진행률 표시 줄로 AJAX 파일 업로드 기능을 구현하려면 다음 단계가 필요합니다.
먼저 파일 업로드 함수가 포함 된 HTML 양식을 작성해야합니다. 파일 업로드 기능은 양식의 ENCTYPE를 "multipart/form-data"로 설정하여 지원됩니다.
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="file">
<input type="submit" value="업로드">
</form>
다음으로 Ajax를 사용하여 파일을 비동기로 제출합니다. javaScript를 통해 사용자가 선택한 파일을 가져오고 FormData 객체를 사용하여 Form Data를 작성하고 XMLHTTPREQUEST 객체를 통해 데이터를 서버로 보냅니다.
다음은 구현 된 JavaScript 코드의 예입니다.
var fileInput = document.getElementById("file");
var file = fileInput.files[0];
var formData = new FormData();
formData.append("file", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);
xhr.upload.addEventListener("progress", function(e) {
var percent = Math.round((e.loaded / e.total) * 100);
console.log("업로드进度:" + percent + "%");
});
xhr.send(formData);
서버는 업로드 된 파일을 수신하고 처리해야합니다. PHP에서는 다음 코드를 사용하여 업로드 된 파일을 서버의 지정된 디렉토리에 저장할 수 있습니다.
<?php
$targetDir = "uploads/";
$targetFile = $targetDir . basename($_FILES["file"]["name"]);
if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetFile)) {
echo "文件업로드成功!";
} else {
echo "文件업로드失败!";
}
?>
사용자가 파일 업로드의 진행 상황을 명확하게 볼 수 있도록 XMLHTTPREQUEST의 진행 상황을 사용하여 업로드 진행 상황을 듣습니다. 이 이벤트를 통해 프론트 엔드 페이지에서 진행률 표시 줄 상태를 업데이트 할 수 있습니다.
진행률 표시 줄을 업데이트하는 코드는 다음과 같습니다.
xhr.upload.addEventListener("progress", function(e) {
var percent = Math.round((e.loaded / e.total) * 100);
var progressBar = document.getElementById("progressBar");
progressBar.style.width = percent + "%";
});
위의 코드를 통해 업로드 프로세스 중에 진행률 표시 줄의 너비를 동적으로 업데이트하여 업로드 진행 상황을 실시간으로 표시 할 수 있습니다.
위의 단계를 통해 진행률 표시 줄이있는 Ajax 파일 업로드 기능을 성공적으로 구현했습니다. 사용자가 파일을 업로드하면 실시간 진행 상황을 볼 수있을뿐만 아니라 원활한 경험도 즐길 수 있습니다. 이 기능의 구현에는 프론트 엔드 Ajax 기술과 백엔드 PHP 파일 업로드 처리가 포함됩니다. 이 단계를 사용하면 진행률 표시 줄로 파일 업로드 기능을 쉽게 빌드 할 수 있습니다.
AJAX 파일 업로드에는 프론트 엔드 간의 협업 작업이 필요하지만 각 단계의 구현을 이해함으로써 관련 기능의 개발을 성공적으로 완료 할 수 있습니다.