「PHPで大容量ファイルのアップロード時の進捗バーを実装する方法」

2年 ago
優斗, 朝陽
1 minute

PHP の大規模ファイルアップロード時のプログレス・バーを実装するには、次の手順に従います。

  1. enctype=”multipart/form-data”
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="上传" name="submit">
</form>
  1. アップロード.php
  2. HTTPアップロード（ファイルのアップロード）
$targetDir = "uploads/";
$targetFile = $targetDir . basename($_FILES["fileToUpload"]["name"]);
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $targetFile)) {
echo "文件上传成功";
} else {
echo "文件上传失败";
}
  1. XMLHttpRequest
  2. 進行中に
  3. $_FILES[‘fileToUpload’][‘error’]
<script>
function uploadFile() {
var fileInput = document.getElementById("fileToUpload");
var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var percentComplete = (event.loaded / event.total) * 100;
console.log(percentComplete + "% 上传完成");
// 更新进度条
// document.getElementById("progressBar").style.width = percentComplete + "%";
}
};
xhr.open("POST", "upload.php", true);
var formData = new FormData();
formData.append("fileToUpload", fileInput.files[0]);
xhr.send(formData);
}
</script>
  1. ファイルをアップロードします
  2. 進捗状況
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="button" value="上传" name="submit" onclick="uploadFile()">
</form>
<!-- 进度条元素 -->
<!-- <div id="progressBar"></div> -->

すると、ユーザーがファイルを選択してアップロードボタンをクリックすると、ファイルはサーバーにアップロードされ、その進行状況はプログレスバーで表示されます。ただし、プログレスバーのスタイルや更新ロジックは、具体的な要件に合わせてカスタマイズする必要があります。

bannerAds