PHP、jQuery、AJAX を使用してマルチファイル アップローダーを実装するにはどうすればよいですか?

PHP、jQuery、AJAX を使用して複数のファイルを含むファイル アップローダーを実装する方法

複数ファイルの選択を有効にするファイル アップロード フォームの場合, ユーザーは通常、[ファイルを追加] ボタンをクリックして、さらに [参照] ボタンを動的に追加します。この機能は、jQuery と AJAX を使用して実装し、フォームを送信し、リモートでファイルのアップロードを処理できます。

初期セットアップ

最初に 1 つの「参照」ボタンを持つ HTML フォームを作成します。 。必要に応じて「参照」ボタンを動的に追加するには、「ファイルを追加」ボタンを含めます。最初の HTML 構造は次のとおりです。

<form enctype="multipart/form-data" action="upload.php" method="post">
    <input name="file[]" type="file" />
    <button class="add_more">Add More Files</button>
    <input type="button">

「ファイルを追加」ボタンの JavaScript 関数ハンドラーを追加して、追加のファイル アップロード入力を動的に追加します。

$(document).ready(function() {
    $('.add_more').click(function(e) {
        e.preventDefault();
        $(this).before("<input name='file[]' type='file' />");
    });
});

サーバー側の実装別の PHP ファイル内のファイルアップロード処理ロジック('upload.php'):

for($i=0; $i<count($_FILES['file']['name']); $i++){
    $target_path = "uploads/";
    $ext = explode('.', basename( $_FILES['file']['name'][$i]));
    $target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext)-1];

    if(move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) {
        echo "The file has been uploaded successfully <br />";
    } else{
        echo "There was an error uploading the file, please try again! <br />";
    }
}

AJAX 実装

AJAX 経由でフォームを送信するには、[ファイルのアップロード] ボタンの jQuery クリック ハンドラーを変更します。次のように:

$('body').on('click', '#upload', function(e){
    e.preventDefault();
    var formData = new FormData($(this).parents('form')[0]);

    $.ajax({
        url: 'upload.php',
        type: 'POST',
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            return myXhr;
        },
        success: function (data) {
            alert("Data Uploaded: "+data);
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
    return false;
});

このコードはフォーム データから FormData オブジェクトを作成し、適切な AJAX オプションを選択し、フォームを送信します。サーバーの応答 (この場合は、単純な確認メッセージ) がアラート ダイアログに表示されます。

これらの変更により、フォームは AJAX を使用して動的に送信され、ユーザーは複数のファイルを一度にアップロードできるようになります。

以上がPHP、jQuery、AJAX を使用してマルチファイル アップローダーを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。