使用Ajax以一种形式上传数据和文件？

Question

使用Ajax以一种形式上传数据和文件？

我在表单中使用jQuery和Ajax来提交数据和文件，但我不知道如何将数据和文件同时以一种形式发送。

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

能否将这两种方法结合起来，以便能够通过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以一种形式发送数据和文件？

我的目标是能够用Ajax将所有的表单发送到一个帖子中，这是可能的吗？

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

Answer 1

我遇到的问题是使用错误的jQuery标识符。你，你们可以上传数据和文件只有一种形式使用Ajax.PHP+HTML<?php print_r($_POST);print_r($_FILES);?><form&nbsp;id="data"&nbsp;method="post"&nbsp;enctype="multipart/form-data"> &nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="text"&nbsp;name="first"&nbsp;value="Bob"&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="text"&nbsp;name="middle"&nbsp;value="James"&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="text"&nbsp;name="last"&nbsp;value="Smith"&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;name="image"&nbsp;type="file"&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;<button>Submit</button></form>jQuery+Ajax$("form#data").submit(function(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;formData&nbsp;=&nbsp;new&nbsp;FormData(this); &nbsp;&nbsp;&nbsp;&nbsp;$.ajax({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;window.location.pathname, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:&nbsp;'POST', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data:&nbsp;formData, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success:&nbsp;function&nbsp;(data)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(data) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cache:&nbsp;false, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contentType:&nbsp;false, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;processData:&nbsp;false &nbsp;&nbsp;&nbsp;&nbsp;});});短版$("form#data").submit(function(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault(); &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;formData&nbsp;=&nbsp;new&nbsp;FormData(this);&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;$.post($(this).attr("action"),&nbsp;formData,&nbsp;function(data)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(data); &nbsp;&nbsp;&nbsp;&nbsp;});});

Answer 2

或更短：$("form#data").submit(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;formData&nbsp;=&nbsp;new&nbsp;FormData($(this)[0]); &nbsp;&nbsp;&nbsp;&nbsp;$.post($(this).attr("action"),&nbsp;formData,&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;success&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;false;});