Question

我目前有一个网页点击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 = “的CustomField”

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

关于后端处理的评论也很受欢迎。

请帮助!!

Answer 1

正如我的评论中所提到的，你忘记了＆＃34;名称＆＃34;您的<input>，<select>等参数

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

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

    }
});

Formdata没有填充

2 个答案: