非同期複数ファイルのアップロードに jQuery の `.submit()` と `.ajax()` を使用する方法

jQuery の '.submit()' および '.ajax()' を使用した AJAX 経由のファイルの送信

概要:

複数のファイルをサーバーにアップロードすることは、Web 開発では一般的な要件です。 jQuery の '.submit()' メソッドと '.ajax()' メソッドは、フォームを送信し、データをサーバーに非同期で送信するための便利なアプローチを提供します。この記事では、これらの方法を使用して複数ファイルのアップロードを容易にする方法について説明します。

フォーム 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:

JavaScript コード[ファイルを追加] ボタンがオンになっている場合、jQuery を使用して追加のファイル入力フィールドを追加します。

$(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 ファイル送信用の jQuery:

最後に、「.submit()」と「 .ajax() メソッドは、イベント リスナーを送信ボタンにバインドするために使用されます。クリックすると、AJAX リクエストが「upload.php」スクリプトに送信され、アップロードされたファイル データが FormData オブジェクトを使用してリクエストに含まれます。 jQuery の「success」関数はサーバーの応答を処理します。

$('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;
});

このアプローチを実装すると、PHP、jQuery、AJAX を使用して複数のファイルを効率的に非同期でアップロードできます。

以上が非同期複数ファイルのアップロードに jQuery の `.submit()` と `.ajax()` を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。