日本語
日本語
最新のWebアプリケーションでは、ファイルのアップロードは一般的な要件であり、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オブジェクトを使用してフォームデータを構築し、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 "文件アップロード失败！";
}
?>
ユーザーがファイルのアップロードの進捗状況を明確に確認できるようにするために、JavaScriptのXMLHTTPREQUESTの進行状況イベントを使用して、アップロードの進行状況を聞くことができます。このイベントを通じて、フロントエンドページでProgress Barステータスを更新できます。
これが進行状況バーを更新するコードです。
xhr.upload.addEventListener("progress", function(e) {
var percent = Math.round((e.loaded / e.total) * 100);
var progressBar = document.getElementById("progressBar");
progressBar.style.width = percent + "%";
});
上記のコードを介して、アップロードプロセス中に進行状況バーの幅を動的に更新することができ、それによりリアルタイムでアップロードの進行状況を表示できます。
上記の手順を通じて、Progress Barを使用してAjaxファイルアップロード機能を正常に実装しました。ユーザーがファイルをアップロードすると、リアルタイムの進捗状況を見るだけでなく、スムーズな体験を楽しむことができます。この関数の実装には、フロントエンドAJAXテクノロジーとバックエンドPHPファイルのアップロード処理が含まれます。これらの手順を使用すると、Progress Barを使用してファイルアップロード機能を簡単に構築できます。
Ajaxファイルのアップロードには、各ステップの特定の実装を理解することにより、フロントエンドとバックエンドの間の共同作業が必要ですが、関連する機能の開発を正常に完了できます。
