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

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

概要

Web フォームから Web フォームへの複数のファイルのアップロードサーバーは Web 開発における一般的なタスクです。この記事では、PHP、jQuery、AJAX を使用して複数のファイルをアップロードするプロセスについて説明します。

フォームのデザイン

最初のステップは、ユーザーが選択できるフォームを作成することです。ファイルをアップロードします。次の HTML マークアップは、最初に 1 つのファイル入力フィールドを含む単純なフォームを表します。

Add More Files

ファイルを追加するための jQuery

ユーザーが複数のファイルをアップロードできるようにするには、jQuery を使用します。 [ファイルを追加] ボタンをクリックすると、追加のファイル入力フィールドが動的に追加されます:

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

PHP ファイル処理

フォームのアクション属性は、ファイルのアップロードを処理する PHP スクリプトである「upload.php」に設定されます。 PHP コードの例を次に示します。

for($i=0; $i<count explode basename . md5 if echo file has been uploaded successfully></count>";
    } else{
        echo "There was an error uploading the file, please try again! <br>";
    }
}

フォームを送信するための AJAX

AJAX を使用してフォームを送信するには、jQuery の .submit() メソッドと .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;
});

このコードを使用すると、ファイル入力フィールドを動的に作成し、ファイルを処理できますPHP を使用してサーバー側にアップロードし、AJAX を使用してフォームを非同期に送信することで、ページをリロードせずに複数のファイルをアップロードできます。

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