448

フォームに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>

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

私の目的は、このフォームすべてを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>
4

11 に答える 11

509

私が抱えていた問題は、間違った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 + Ajax

$("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);
    });
});
于 2012-06-05T15:03:17.157 に答える
35

もう1つのオプションは、iframeを使用して、フォームのターゲットをそれに設定することです。

これを試すことができます（jQueryを使用します）：

function ajax_form($form, on_complete)
{
    var iframe;

    if (!$form.attr('target'))
    {
        //create a unique iframe for the form
        iframe = $("<iframe></iframe>").attr('name', 'ajax_form_' + Math.floor(Math.random() * 999999)).hide().appendTo($('body'));
        $form.attr('target', iframe.attr('name'));
    }

    if (on_complete)
    {
        iframe = iframe || $('iframe[name="' + $form.attr('target') + '"]');
        iframe.load(function ()
        {
            //get the server response
            var response = iframe.contents().find('body').text();
            on_complete(response);
        });
    }
}

すべてのブラウザでうまく機能し、データをシリアル化または準備する必要はありません。欠点の1つは、進行状況を監視できないことです。

また、少なくともchromeの場合、リクエストは開発者ツールの[xhr]タブではなく、[doc]の下に表示されます。

于 2016-05-02T07:07:52.083 に答える
27

ASP.NetMVCでHttpPostedFilebaseを使用して同じ問題が発生し、送信時にフォームを使用する代わりに、クリックするボタンを使用して何かを行う必要がありました。問題がなければ送信フォームを使用する必要がありました。

$(".submitbtn").on("click", function(e) {

    var form = $("#Form");

    // you can't pass Jquery form it has to be javascript form object
    var formData = new FormData(form[0]);

    //if you only need to upload files then 
    //Grab the File upload control and append each file manually to FormData
    //var files = form.find("#fileupload")[0].files;

    //$.each(files, function() {
    //  var file = $(this);
    //  formData.append(file[0].name, file[0]);
    //});

    if ($(form).valid()) {
        $.ajax({
            type: "POST",
            url: $(form).prop("action"),
            //dataType: 'json', //not sure but works for me without this
            data: formData,
            contentType: false, //this is requireded please see answers above
            processData: false, //this is requireded please see answers above
            //cache: false, //not sure but works for me without this
            error   : ErrorHandler,
            success : successHandler
        });
    }
});

これにより、MVCモデルに正しくデータが入力されます。モデルで、HttpPostedFileBase[]のプロパティがhtmlの入力コントロールの名前と同じ名前であることを確認してください。

<input id="fileupload" type="file" name="UploadedFiles" multiple>

public class MyViewModel
{
    public HttpPostedFileBase[] UploadedFiles { get; set; }
}
于 2018-01-04T16:20:53.547 に答える
20

またはそれより短い：

$("form#data").submit(function() {
    var formData = new FormData(this);
    $.post($(this).attr("action"), formData, function() {
        // success    
    });
    return false;
});
于 2012-07-05T07:29:04.803 に答える
14

enctype: 'multipart/form-data'私にとっては、Ajaxリクエストのフィールドなしでは機能しませんでした。同様の問題で立ち往生している人に役立つことを願っています。

enctype はすでにform属性に設定されていますが、何らかの理由で、Ajaxリクエストはenctype明示的な宣言なしで自動的に識別しませんでした（jQuery3.3.1）。

// Tested, this works for me (jQuery 3.3.1)

fileUploadForm.submit(function (e) {   
    e.preventDefault();
    $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            enctype: 'multipart/form-data',
            data: new FormData(this),
            processData: false,
            contentType: false,
            success: function (data) {
                console.log('Thank God it worked!');
            }
        }
    );
});

// enctype field was set in the form but Ajax request didn't set it by default.

<form action="process/file-upload" enctype="multipart/form-data" method="post" >

     <input type="file" name="input-file" accept="text/plain" required> 
     ...
</form>

上記の他のように、contentTypeおよびprocessDataフィールドにも特に注意を払ってください。

于 2019-02-06T01:29:48.643 に答える
7

シンプルですがより効果的な方法：
new FormData()それ自体がコンテナ（またはバッグ）のようなものです。すべてのattrまたはfileをそれ自体に置くことができます。あなたがattribute, file, fileName例えばを追加する必要がある唯一のもの：

let formData = new FormData()
formData.append('input', input.files[0], input.files[0].name)

そしてそれをAJAXリクエストで渡すだけです。例えば：

    let formData = new FormData()
    var d = $('#fileid')[0].files[0]

    formData.append('fileid', d);
    formData.append('inputname', value);

    $.ajax({
        url: '/yourroute',
        method: 'POST',
        contentType: false,
        processData: false,
        data: formData,
        success: function(res){
            console.log('successfully')
        },
        error: function(){
            console.log('error')
        }
    })

FormDataを使用して、n個のファイルまたはデータを追加できます。

また、Script.jsファイルからNode.jsのルートファイルにAJAXリクエストを行う場合は、
req.bodyデータ（テキストなど）
req.filesにアクセスしてファイル（画像、ビデオなど）にアクセスするために使用することに注意してください。

于 2020-06-05T05:34:38.173 に答える
1

以下のコードは私のために働きます

$(function () {
    debugger;
    document.getElementById("FormId").addEventListener("submit", function (e) {
        debugger;
        if (ValidDateFrom()) { // Check Validation 
            var form = e.target;
            if (form.getAttribute("enctype") === "multipart/form-data") {
                debugger;
                if (form.dataset.ajax) {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    var xhr = new XMLHttpRequest();
                    xhr.open(form.method, form.action);
                    xhr.onreadystatechange = function (result) {
                        debugger;
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            debugger;
                            var responseData = JSON.parse(xhr.responseText);
                            SuccessMethod(responseData); // Redirect to your Success method 
                        }
                    };
                    xhr.send(new FormData(form));
                }
            }
        }
    }, true);
});

アクションポストメソッドで、パラメーターをHttpPostedFileBase UploadFileとして渡し、ファイル入力がアクションメソッドのパラメーターに記載されているものと同じであることを確認します。AJAXBeginフォームでも機能するはずです。

上記のコードで定義されたpost呼び出しを行い、要件に従ってコードでメソッドを参照できるため、AJAXBEGINフォームはここでは機能しないことに注意してください。

私は遅く答えていることを知っていますが、これは私のために働いたものです

于 2018-05-10T10:59:26.673 に答える
1

これは私が実装したソリューションです

var formData = new FormData();
var files = $('input[type=file]');
for (var i = 0; i < files.length; i++) {
if (files[i].value == "" || files[i].value == null) {
    return false;
}
else {
    formData.append(files[i].name, files[i].files[0]);
}
}
var formSerializeArray = $("#Form").serializeArray();
for (var i = 0; i < formSerializeArray.length; i++) {
  formData.append(formSerializeArray[i].name, formSerializeArray[i].value)
}
$.ajax({
 type: 'POST',
 data: formData,
 contentType: false,
 processData: false,
 cache: false,
 url: '/Controller/Action',
 success: function (response) {
    if (response.Success == true) {
        return true;
    }
    else {
        return false;
    }
 },
 error: function () {
    return false;
 },
 failure: function () {
    return false;
 }
 });
于 2021-09-23T08:37:02.890 に答える
-1

私の場合、POSTリクエストを作成する必要がありました。このリクエストには、ヘッダーを介して送信された情報と、FormDataオブジェクトを使用して送信されたファイルが含まれていました。

ここでいくつかの回答を組み合わせて機能させたので、基本的に機能するのは、Ajaxリクエストに次の5行を含めることでした。

 contentType: "application/octet-stream",
 enctype: 'multipart/form-data',
 contentType: false,
 processData: false,
 data: formData,

formDataは、次のように作成された変数でした。

 var file = document.getElementById('uploadedFile').files[0];
 var form = $('form')[0];
 var formData = new FormData(form);
 formData.append("File", file);
于 2019-04-01T11:05:42.047 に答える
-1

フォームデータにそれらを追加し、そこにファイルとデータを追加するだけです。これを読むことができます。

https://developer.mozilla.org/en-US/docs/Web/API/FormData/append

より良い理解のために。ファイルの場合は$_FILES、データの場合は$_POSTを別々に取得できます。

于 2020-08-12T13:44:31.917 に答える
-3 
<form id="form" method="post" action="otherpage.php" 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 type='button' id='submit_btn'>Submit</button>
</form>

<script>
$(document).on("click", "#submit_btn", function (e) {
    //Prevent Instant Click  
    e.preventDefault();
    // Create an FormData object 
    var formData = $("#form").submit(function (e) {
        return;
    });
    //formData[0] contain form data only 
    // You can directly make object via using form id but it require all ajax operation inside $("form").submit(<!-- Ajax Here   -->)
    var formData = new FormData(formData[0]);
    $.ajax({
        url: $('#form').attr('action'),
        type: 'POST',
        data: formData,
        success: function (response) {
            console.log(response);
        },
        contentType: false,
        processData: false,
        cache: false
    });
    return false;
});
</script>

///// otherpage.php

<?php
    print_r($_FILES);
?>
于 2018-09-27T05:37:01.340 に答える