PHPとAjax：リアルタイムファイルアップロード機能

PHP と Ajax を使用してリアルタイム ファイル アップロードを実装するにはどうすればよいですか? PHP でファイルのアップロードを構成し、アクセス許可を設定します。アップロードを処理するサーバー側スクリプトを作成します。 jQuery を使用して Ajax リクエストを処理するクライアント側スクリプトを作成します。ファイル入力ボックスと送信ボタンを HTML フォームに追加します。 Ajax を使用して、ファイルをサーバーに非同期的に送信し、ページをリロードせずにアップロード ステータスを受信します。

Ajax を使用した PHP: リアルタイム ファイル アップロード

はじめに

Ajax (非同期 JavaScript および XML) テクノロジーを使用すると、ページ全体をリロードせずにサーバーとの非同期通信が可能になります。 PHP と組み合わせると、ユーザーにリアルタイムのフィードバックを提供するリアルタイム ファイル アップロード機能を作成できます。

設定

Ajax を使用するには、PHP スクリプトと JavaScript スクリプトの間で通信する必要があります。この例では、jQuery ライブラリを使用して、クライアントからの Ajax リクエストを処理します。 PHP 設定で、ファイルのアップロードが許可されており、適切な権限が設定されていることを確認してください。

サーバーサイドスクリプト(upload.php)

<?php
if (isset($_FILES['file'])) {
    $file = $_FILES['file'];

    // 验证并移动上传的文件
    if (move_uploaded_file($file['tmp_name'], 'uploads/' . $file['name'])) {
        echo '文件上传成功！';
    } else {
        echo '文件上传失败！';
    }
}
?>

クライアントサイドスクリプト(upload.js)

$(document).ready(function() {
    $("#file-form").submit(function(e) {
        e.preventDefault();

        let formData = new FormData(this);

        $.ajax({
            url: 'upload.php',
            type: 'POST',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data) {
                alert(data);
            },
            error: function() {
                alert('请求失败！');
            }
        });
    });
});

HTMLフォーム

<form id="file-form" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="上传">
</form>

実用的なケース

これはファイルピッカーインターフェースです。ファイルはリアルタイムでサーバーにアップロードされます。ユーザーはファイルを選択でき、そのファイルは xhr リクエストでサーバーに非同期的に送信されます。サーバー スクリプトはファイルを検証して保存し、アップロードの成功または失敗を示す応答をクライアントに送信します。こうすることで、ユーザーはページをリロードしなくてもアップロード結果を確認できます。

以上がPHPとAjax：リアルタイムファイルアップロード機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。