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

Answer 2

或更短：

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