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

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

我目前对这两种方法的处理方式几乎相同，但将数据收集到数组中的方式不同，数据使用

.serialize（）

但是文件使用

=newformdata（$（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>

$("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>

$（“表单数据”）.submit（函数（）{
var formData=$（this.serialize（）；
$.ajax({
url:window.location.pathname，
键入：“POST”，
数据：formData，
async:false，
成功：功能（数据）{
警报（数据）
},
cache:false，
contentType:false，
processData:false
});
返回false；
});
提交

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

$("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>

$（“表单文件”）.submit（函数（）{
var formData=新formData（$（此）[0]）；
$.ajax({
url:window.location.pathname，
键入：“POST”，
数据：formData，
async:false，
成功：功能（数据）{
警报（数据）
},
cache:false，
contentType:false，
processData:false
});
返回false；
});
提交

如何将上述内容结合起来，以便通过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>


提交
我遇到的问题是使用了错误的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>

短版

$("form#data").submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);    

    $.post($(this).attr("action"), formData, function(data) {
        alert(data);
    });
});

或更短：

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

另一个选项是使用iframe并将表单的目标设置为它

您可以尝试以下方法（它使用jQuery）：

函数ajax\u表单（$form，on\u complete）
{
var-iframe；
if（！$form.attr（'target'））
{
//为表单创建唯一的iframe
iframe=$（“”）.attr（$（'name'，'ajax_form_u'+Math.floor（Math.random（）*99999））.hide（）.appendTo（$（'body'）；
$form.attr（'target'，iframe.attr（'name'）；
}
如果（完成时）
{
iframe=iframe | |$（'iframe[name=“”+$form.attr（'target'）+“]”）；
iframe.load（函数（）
{
//获取服务器响应
var response=iframe.contents（）.find（'body'）.text（）；
完成时（响应）；
});
}
}

它适用于所有浏览器，您不需要序列化或准备数据。
一个不利的方面是你不能监控进度

另外，至少对于chrome，请求不会出现在开发者工具的“xhr”选项卡中，而是出现在“doc”下
我在ASP.Net MVC和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; }
}


公共类MyViewModel
{
公共HttpPostedFileBase[]上载文件{get；set；}
}
对于我来说，下面的代码工作

$(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调用，并且您可以根据需要在代码中引用您的方法

我知道我回答晚了，但这对我来说很有效

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


提交
$（文档）。在“单击”上，“提交”，功能（e）{
//防止即时点击
e、 预防默认值（）；
//创建FormData对象
var formData=$（“#form”）.submit（函数（e）{
返回；
});
//formData[0]仅包含表单数据
//您可以通过使用表单id直接创建对象，但它需要在$（“表单”）.submit（）中执行所有ajax操作
var formData=新formData（formData[0]）；
$.ajax({
url:$（'#form'）.attr（'action'），
键入：“POST”，
数据：formData，
成功：功能（响应）{
控制台日志（响应）；
},
contentType:false，
processData:false，
缓存：false
});
返回false；
});

/////otherpage.php

<?php
    print_r($_FILES);
?>


对我来说，如果Ajax请求中没有
enctype:“multipart/form data”
字段，它就无法工作。我希望它能帮助陷入类似问题的人

尽管表单属性中已经设置了
enctype
，但由于某种原因，Ajax请求在没有明确声明的情况下不会自动识别
enctype
（jQuery 3.3.1）

//经过测试，这对我有用（jQuery 3.3.1）
提交（函数（e）{
e、 预防默认值（）；
$.ajax({
键入：“POST”，
url:$（this.attr（'action'），
enctype:“多部分/表单数据”，
数据：新表单数据（本），
processData:false，
contentType:false，
成功：功能（数据）{
console.log（'感谢上帝它成功了！'）；
}
}
);
});
//表单中设置了enctype字段，但默认情况下Ajax请求未设置该字段。
...

如上所述，请特别注意
contentType
和
processData
字段。
在我的情况下，我必须发出POST请求，通过
// 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: "application/octet-stream",
 enctype: 'multipart/form-data',
 contentType: false,
 processData: false,
 data: formData,

 var file = document.getElementById('uploadedFile').files[0];
 var form = $('form')[0];
 var formData = new FormData(form);
 formData.append("File", file);

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

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