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

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

概要

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

フォームのデザイン

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

<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">

ファイルを追加するための 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($_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 の .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 サイトの他の関連記事を参照してください。