使用Ajax在一个表单中上传数据和文件? - Code

我正在使用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>

当前回答

在我的情况下，我必须发出一个POST请求，其中有通过头发送的信息，以及使用FormData对象发送的文件。

我使用这里的一些答案的组合使它工作，所以基本上最终工作的是在我的Ajax请求中有这五行:

 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-01 11:05:42

其他回答

问题是我使用了错误的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);
    });
});

2012-06-05 15:03:17

在我的情况下，我必须发出一个POST请求，其中有通过头发送的信息，以及使用FormData对象发送的文件。

我使用这里的一些答案的组合使它工作，所以基本上最终工作的是在我的Ajax请求中有这五行:

 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-01 11:05:42

或更短:

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

2012-07-05 07:29:04

下面的代码适合我

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

在Action Post方法中，将参数传递为HttpPostedFileBase UploadFile，并确保您的文件输入与Action方法的参数中提到的相同。它也应该与AJAX Begin表单一起工作。

记住在这里，你的AJAX BEGIN表单将不会在这里工作，因为你在上面提到的代码中定义了你的post调用，你可以根据需求在代码中引用你的方法

我知道我回答得晚了，但这对我来说是有效的

2018-05-10 10:59:26

只是提醒一下，在2022年你不需要使用jquery。尝试js标准的Fetch API

    var formData = new FormData(this);

    fetch(url, { 
      method: 'POST',
      body: formData
    })
    .then(response => {
      if(response.ok) {
        //success
        alert(response);
      } else {
        throw Error('Server error');
      }
    })
    .catch(error => {
       console.log('fail', error);
    });

2022-03-19 16:34:33

aliyun