表单数据未填充答案

【问题标题】：Formdata not getting populated表单数据未填充
【发布时间】：2018-02-27 07:49:00
【问题描述】：

我目前有一个网页访问 web 服务以发送 multipart/form-data 但不知何故这些字段没有附加到 formdata 对象中。有人可以帮我吗？

index.html

<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>Sample upload</title>

<script type="text/javascript" src="webjars/jquery/3.2.1/jquery.min.js">
</script>
<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
/>

<script>
$(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 = $('#dataform')[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: "/save",
    data: data,
    //http://api.jquery.com/jQuery.ajax/
    //https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
    processData: false, //prevent jQuery from automatically transforming the data into a query string
    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);

    }
});

}
 </script>
</head>

<body>
<h1>SampleCardSubmit</h1>

<form id="dataform" method="POST" enctype="multipart/form-data">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4>Section I:To be filled by Partner</h4>
        </div>
        <div class="panel-body">

            <div class="form-group">
                <label class="col-sm-5 control-label">Partner Name:</label>
                <div class="col-sm-5">
                    <input id="name" type="text" class="form-control" />
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-5 control-label">Photograph of
                    applicant:</label>
                <div class="col-sm-5">
                    <input id="photo" type="file" class="form-control" />
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-5 control-label">Partner OLM ID:</label>
                <div class="col-sm-5">
                    <input id="olmid" type="text" class="form-control" />
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-5 control-label">Partner Mobile
                    Number:</label>
                <div class="col-sm-5">
                    <input id="mobile" type="text" class="form-control" />
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-5 control-label">Partner Email:</label>
                <div class="col-sm-5">
                    <input id="email" type="text" class="form-control" />
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-5 control-label">Disability:</label>
                <div class="col-sm-5">
                    <select id="disabibilty" class="form-control">
                        <option value="Yes">Yes</option>
                        <option value="No">No</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-5 control-label">Partner Company Name:</label>
                <div class="col-sm-5">
                    <input id="company" type="text" class="form-control" />
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-5 control-label">Name of Partner on
                    Company ID:</label>
                <div class="col-sm-5">
                    <input id="nameoncard" type="text" class="form-control" />
                </div>
            </div>

            <div class="row">
                <div class="col-sm-5">
                    <input id="btnSubmit" type="submit" class="btn btn-primary"/>
                </div>
            </div>
        </div>
    </div>
</form>
<h1>Ajax Post Result</h1>
<span id="result"></span>
 </body>
 </html>

控制器

@RestController
 public class CardController {

@Autowired
private CardService cardService;

@RequestMapping(value="/save", method = RequestMethod.POST)
 public ResponseEntity<?> multiUploadFileModel(@ModelAttribute Card card) {

        cardService.saveCard(card);
        return new ResponseEntity("Successfully uploaded!", HttpStatus.OK);
  }
}

型号

@Entity
public class Card {

@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private Integer id;

private String name;

private Blob photo;

@Column(unique=true)
private String olmId;

private String mobileNumber;

private String email;

private String disability;

private String partnerCompany;

private String nameOnCompanyCard;

点击提交按钮时的请求负载是这样的：

------WebKitFormBoundary1NqBHFrbwUgHBc7g 内容处置：表单数据； name="自定义字段"

这是一些额外的数据，正在测试 ------WebKitFormBoundary1NqBHFrbwUgHBc7g--

还感谢有关后端处理的评论。

请帮忙！！

【问题讨论】：

我很确定您需要在输入/选择/等中添加一个“名称”参数才能将其添加到 POST 数据中。
谢谢！！那行得通:)

标签： javascript java ajax rest spring-boot

【解决方案1】：

根据我的评论，您忘记了 <input>、<select> 等中的“名称”参数。

这会导致字段及其数据不被添加到生成的 POST 中（因为浏览器不知道如何处理它）。

【讨论】：

是的。在输入字段上添加名称属性有效并且代码有效。
图片没有被保存。有什么建议可以解决这个问题吗？
我将此添加为答案，以便您可以将其标记为已解决；）至于为什么它没有上传，我不知道，因为我对您正在使用的框架一无所知。在一个单独的问题中会更好。
doh... head slap你是我的英雄。

【解决方案2】：

您可以通过在标题中添加 x-www-form-urlencoded 并添加您的数据来尝试以下逻辑，如下所示。让我知道它是否适合你。

$.ajax({
    type: "POST",
    url: "/save",

    headers: {
     'Content-Type': 'appliation/x-www-form-urlencoded',
     'Authorization': 'Basic VGV.... Uy' // Add authorization if required
    }, 

    data: {
        "CustomField", "This is some extra data, testing",
        ..... // More attributes if any
     },

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

    }
});

【讨论】：

xorinzor 的回复有效。这也可以，但是如果我们有很多字段再次执行 form.append() ，这将不是智能编码，这很烦人。