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

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

Linda Hamilton
リリース: 2024-11-23 05:54:14
オリジナル
788 人が閲覧しました

How to Implement Ajax-Powered Multiple File Uploads with PHP, jQuery, and AJAX?

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

PHP、jQuery、および AJAX を使用して複数のファイルをアップロードするには、次の手順を実行します。これらの手順:

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' />");
    });
});
ログイン後にコピー

JavaScript (ファイルのアップロード):

$('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 ファイルのアップロード処理:

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 リクエストを介して複数のファイルをアップロードするプロセスを合理化します。

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

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