使用 Ajax 以一种形式同时上传数据和文件? [英] Uploading both data and files in one form using Ajax?

问题描述

我在表单中使用 jQuery 和 Ajax 来提交数据和文件，但我不确定如何在一种表单中同时发送数据和文件?

I'm using jQuery and Ajax for my forms to submit data and files but I'm not sure how to send both data and files in one form?

我目前对这两种方法几乎相同，但将数据收集到数组中的方式不同，数据使用 .serialize(); 但文件使用 =new FormData($(this)[0]);

I currently do almost the same with both methods but the way in which the data is gathered into an array is different, the data uses .serialize(); but the files use = new FormData($(this)[0]);

是否可以将两种方法结合起来，通过 Ajax 以一种形式上传文件和数据?

Is it possible to combine both methods to be able to upload files and data in one form through Ajax?

数据 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 以一种形式发送数据和文件?

How can I combine the above so that I can send data and files in one form via Ajax?

我的目标是能够使用 Ajax 在一个帖子中发送所有这些表单，这可能吗?

My aim is to be able to send all of this form in one post with Ajax, is it possible?

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

推荐答案

我遇到的问题是使用了错误的 jQuery 标识符.

The problem I had was using the wrong jQuery identifier.

您可以使用一个表单使用ajax上传数据和文件.

You can upload data and files with one form using ajax.

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);
    });
});

这篇关于使用 Ajax 以一种形式同时上传数据和文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！