ホームページ > バックエンド開発 > PHPチュートリアル > PHP、jQuery、AJAX を使用して複数のファイルのアップロードを処理するにはどうすればよいですか?

PHP、jQuery、AJAX を使用して複数のファイルのアップロードを処理するにはどうすればよいですか?

Susan Sarandon
リリース: 2024-11-26 11:38:10
オリジナル
270 人が閲覧しました

How to Handle Multiple File Uploads with PHP, jQuery, and AJAX?

PHP、jQuery、および AJAX を使用した複数のファイルのアップロードの処理

この投稿では、PHP、jQuery、および AJAX を使用して複数のファイルのアップロードを効果的に処理する方法を検討します。 。プロセスを 3 つのステップに分けて説明します。フォームの準備、jQuery を使用した機能の追加、ファイルのアップロードの処理です。

フォームの準備

まず作成します。複数のファイル参照ボタンを含む HTML フォーム。各ファイル入力には、ファイルの配列を処理できることを示す、name 属性が file[] に設定されている必要があります。フォーム送信用のボタンを含めます。

jQuery 機能の追加

jQuery を利用して、ファイル参照ボタンを追加する機能を追加します。新しいファイル入力要素をフォームに動的に追加する「ファイルを追加」ボタンのクリック ハンドラーを実装します。

ファイル アップロードの処理

PHP スクリプトでは、ファイルのアップロードを処理します。ループを使用して、$_FILES['file'] 配列内の各ファイルを反復処理します。アップロードされたファイルのターゲット パスは、上書きを防ぐために独自に生成されます。ファイルがターゲット パスに移動されたら、成功またはエラー メッセージを返します。

AJAX を使用したフォームの送信

AJAX 経由でフォームを送信するには、次のコマンドを使用します。コード:

$('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 オブジェクトを作成します。フォーム データを取得し、upload.php に AJAX リクエストを送信し、サーバーの応答を処理して、デフォルトのフォーム送信を防ぎます。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート