使用 jquery/ajax 为 REST API 上传文件答案

【问题标题】：File upload using jquery/ajax for REST API使用 jquery/ajax 为 REST API 上传文件
【发布时间】：2019-12-10 18:23:48
【问题描述】：

我试图通过 ajax/jquery 使用 REST api 使用以下脚本将文件上传到远程服务器，但它返回 400 错误和错误请求。我已经用 curl 测试了端点，它给出了正确的响应并且正在上传文件。

 $(document).ready(function () {

    $("#btnSubmit").click(function (event) {

        //stop submit the form, we will post it manually.
        event.preventDefault();

        fire_ajax_submit();

    });

});

        function fire_ajax_submit() {

        // Get form
        var form = $('#fileUploadForm')[0];
        alert(form.files[0]);

        var data = new FormData(form);
        data.append("CustomField", "This is some extra data, testing");

        $("#btnSubmit").prop("disabled", true);

        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: "http://10.13.20.166:5332/fileUploadtoFolder",
            data: data,

            processData: false, 
            contentType: false,
            cache: false,
            timeout: 600000,
            success: function (data) {

                $("#result").text(data);
                console.log("SUCCESS : ", data);
                $("#btnSubmit").prop("disabled", false);

            },
            error: function (e) {

                $("#result").text(e.responseText);
                console.log("ERROR : ", e);
                $("#btnSubmit").prop("disabled", false);

            }
        });

        }

【问题讨论】：

var fd = new FormData($("#fileinfo"));将其更改为 var fd = new FormData($("#fileinfo")[0]);
感谢 Prabhjot 的回复。但是很抱歉，我最初放置了错误的代码，因为我正在尝试不同的代码进行上传。但是这段代码对我来说看起来很完美，但它不起作用并出现 400 错误。
您可能在请求中缺少标头。 400 错误是因为缺少标题。
你能指导我如何添加吗？我对这项技术没有那么丰富的经验。
你能贴出你的html表单的代码吗？

标签： ajax jquery-file-upload

【解决方案1】：

更改您的代码?

var data = new FormData(form);

使用此代码?

// Create an FormData object
var data = new FormData(document.getElementById("fileUploadForm"));

再试一次

【讨论】：