表单数据未填充
Posted
技术标签:
【中文标题】表单数据未填充【英文标题】：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 数据中。 谢谢！！那行得通:) 【参考方案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() ，这将不是智能编码，这很烦人。以上是关于表单数据未填充的主要内容，如果未能解决你的问题，请参考以下文章
Xamarin表单：ios平台上的webview中视频未完全填充