☰

Ajax を使用して 1 つのフォームにデータとファイルをアップロードしますか? 質問する

tag-icon • tag-icon javascript jquery ajax forms
Ajax を使用して 1 つのフォームにデータとファイルをアップロードしますか? 質問する

フォームでデータとファイルを送信するために jQuery と Ajax を使用していますが、データとファイルの両方を 1 つのフォームで送信する方法がわかりません。

現在、両方の方法でほぼ同じことを行っていますが、データが配列に集められる方法が異なります。データは を使用します.serialize();が、ファイルは を使用します= new FormData($(this)[0]);。

両方の方法を組み合わせて、Ajax を介して 1 つのフォームでファイルとデータをアップロードすることは可能ですか?

データ jQuery、Ajax、HTML

$("form#data").submit(function(){
    
    var formData = $(this).serialize();

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });
    
    return false;
});

<form id="data" method="post">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <button>Submit</button>
</form>

ファイル jQuery、Ajax、HTML

$("form#files").submit(function(){
    
    var formData = new FormData($(this)[0]);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });
    
    return false;
});

<form id="files" method="post" enctype="multipart/form-data">
    <input name="image" type="file" />
    <button>Submit</button>
</form>

上記を組み合わせて、データとファイルを 1 つの形式で Ajax 経由で送信するにはどうすればよいでしょうか?

私の目標は、このフォーム全体を Ajax を使用して 1 つの投稿で送信できるようにすることですが、それは可能ですか?

<form id="datafiles" method="post" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button>Submit</button>
</form>

ベストアンサー1

私が抱えていた問題は、間違った jQuery 識別子を使用していたことです。

ajax を使用して1 つのフォームでデータとファイルをアップロードできます。

PHP + HTML

<?php

print_r($_POST);
print_r($_FILES);
?>

<form id="data" method="post" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button>Submit</button>
</form>

jQuery + アヤックス

$("form#data").submit(function(e) {
    e.preventDefault();    
    var formData = new FormData(this);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });
});

短縮版

$("form#data").submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);    

    $.post($(this).attr("action"), formData, function(data) {
        alert(data);
    });
});

おすすめ記事