formData 不附加也不发送答案

【问题标题】：formData not appending nor sendingformData 不附加也不发送
【发布时间】：2016-11-18 23:44:20
【问题描述】：

我知道这个问题可能是重复的，但我已经验证了他们的每一种方法，但似乎都没有。

基本上，我的问题是 FormData();对我不起作用，无论是使用 FormData(myform) 创建实例还是仅使用附加的独立 formdata() 创建实例，它都没有做任何事情。

这是我正在测试的代码：

HTML

<form id="form">
        <input type="hidden" name="id" id="id" value="1">
        <input type="text" name="title" id="title">
        <select name="category" id="category">
            <option value="1">1</option>
        </select>
        <textarea name="desc" id="desc"></textarea>
        <input type="file" name="cover" id="cover">
        <div id="content">
            Hello World
        </div>
        <input type="submit" name="submit" value="Submit">
    </form>
    <script src="js/jquery-2.2.1.js"></script>
    <script src="js/now.js"></script>

JAVASCRIPT (now.js)

$('#form').on('submit', function(e){
        e.preventDefault();
        var myform = e.target;
        var inputfile = document.querySelector('#cover');

        var formData = new FormData(myform);

        formData.append('file', inputfile.files[0]);
        //formData.append('cover', $('input[type=file]')[0].files[0]);
        var xhttp = new XMLHttpRequest();
        xhttp.open('POST', 'data.txt', true);
        xhttp.send(formData);
});

我希望得到一些帮助。

PS。 Console.log(formData) 是一团糟，之后我也看不到任何东西，并且网络时间线运行，但没有输出。

谢谢大家，

【问题讨论】：

你用的是什么浏览器？
#cover 元素是表单的一部分，因此已经在 formData 中。为什么要尝试将第一个文件附加到 FormData？
尝试将enctype="multipart/form-data 添加到您的表单中！！！
@IsmailRBOUH 我正在使用 Chrome，并且我已将 enctype 添加到表单中。没有改变任何东西。
@Andreas 这是因为表单在某些情况下没有考虑 input type=file （如果不是全部，我还在学习）。无论它是否存在，我的 XML 请求都不会解析，FormData 也不会添加任何内容。

标签： javascript jquery html ajax forms

【解决方案1】：

我尝试过从角度做它，在下面我放了一些做同样事情的 sn-p。

$scope.upload = function () {
        var file = $scope.file;
        var obj = new Object();
        var fd = new FormData();
        fd.append("paramOne","xyz");
        fd.append("paramTwo","xyz");
        fd.append("file", file);        
        var uploadUrl = "/someUrl";
        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {
                'Content-Type': undefined
            }
        }).success(function (data) {
                console.log("Call successful");
        });
    }

我希望这可以为解决问题提供一些见解。我能想到缺少标题或 transformationRequest 部分的东西！！

我觉得这篇文章可以帮到你Using Multipart without Form in Spring MVC

【讨论】：

【解决方案2】：

好的，我解决了：

我将在此处键入的代码复制并粘贴到我的文件中。原来我在 I 上有一个撇号。我不小心有 type=file。错字。此外，没有任何内容输出到 data.txt 文件中。如果您需要了解如何在基本级别上执行 ajax 表单，请随意将其用作参考。

【讨论】：