HTML 表单数据的结构
Structure of HTML Form Data
我知道这是个愚蠢的问题,但是如何格式化此表单数据的有效负载。我不能多次发出请求,所以我看不到真正的请求发送。
我在本地 html 文件上尝试过同样的操作,然后尝试发出请求,但我不知道图像附件是否正确。
<form method="post" id="txnForm" class="form-horizontal" enctype="multipart/form-data" autocomplete="off" action="https://example.com">
<div class="col-md-12">
<div class="col-md-3">
<label>Name : </label><br>
<input type="text" class="form-control" name="name[]" required="" />
</div>
<div class="col-md-6">
<label>Address : </label><br>
<input type="text" class="form-control" name="address[]" required="" />
</div>
<div class="col-md-3">
<label>Occupation : </label><br>
<input type="text" class="form-control" name="occupation[]" required="" />
</div>
<div class="col-md-3">
<label>Mobile : </label><br>
<input type="text" class="form-control" name="mobile[]" required="" />
</div>
<div class="col-md-3">
<label>Email : </label><br>
<input type="text" class="form-control" name="email[]" required="" />
</div>
<div class="col-md-3">
<label>Aadhar No: </label><br>
<input type="text" class="form-control" name="aadhar_no[]" required="" />
</div>
<div class="col-md-3">
<label>Aadhar Image: </label><br>
<input type="file" class="form-control" name="aadhar_image" required="" />
</div>
</div>
<div class="col-md-12">
<div class="col-md-3">
<label>Name : </label><br>
<input type="text" class="form-control" name="name[]" required="" />
</div>
<div class="col-md-6">
<label>Address : </label><br>
<input type="text" class="form-control" name="address[]" required="" />
</div>
<div class="col-md-3">
<label>Occupation : </label><br>
<input type="text" class="form-control" name="occupation[]" required="" />
</div>
<div class="col-md-3">
<label>Mobile : </label><br>
<input type="text" class="form-control" name="mobile[]" required="" />
</div>
<div class="col-md-3">
<label>Email : </label><br>
<input type="text" class="form-control" name="email[]" required="" />
</div>
<div class="col-md-3">
<label>Aadhar No: </label><br>
<input type="text" class="form-control" name="aadhar_no[]" required="" />
</div>
<div class="col-md-3">
<label>Aadhar Image: </label><br>
<input type="file" class="form-control" name="aadhar_image" required="" />
</div>
</div>
<div class="clearfix"> </div>
</form>
如果我是对的,那么表单数据将如下所示:
formData = {
'aadhar_no[]' : ['123456789', '123456789', '123456789', '123456789'],
'address[]' : [],
'csrf_token' : csrf_token,
'email[]' : [],
'member_id' : member_id,
'mobile[]' : [],
'name[]' : [],
'occupation[]' : [],
'aadhar_image' : []
}
HTML 表单数据永远不会通过 Javascript 发送。两个主要类型是 multipart/form-data
,当您有一个文件字段时,它是必需的;application/x-www-form-urlencoded
,这是默认的,并且更紧凑。 multipart/form-data
像 MIME-encoded 电子邮件一样发送:
您的数据将像这样发送。该规范在 RFC 7578 中:https://www.rfc-editor.org/rfc/rfc7578
Content-Type: multipart/form-data, boundary=---1234
---1234
Content-Disposition: form-data; name="name[]"
value-of-name-field
---1234
Content-Disposition: form-data; name="address[]"
value-of-address-field
---1234
Content-Disposition: form-data; name="occupation[]"
value-of-occupation-field
---1234
......
Content-Disposition: form-data; name="aadhar_image[]"
Content-Type: multipart/mixed; boundary=---5678
--5678
Content-Disposition: file; filename="image.jpg"
Content-Type: image/jpg
Content-Transfer-Encoding: binary
.... jpeg image data ...
--5678
--1234
许多 Web 框架会为您将其转换为 JSON,但这不是它通过网络的方式。
我知道这是个愚蠢的问题,但是如何格式化此表单数据的有效负载。我不能多次发出请求,所以我看不到真正的请求发送。
我在本地 html 文件上尝试过同样的操作,然后尝试发出请求,但我不知道图像附件是否正确。
<form method="post" id="txnForm" class="form-horizontal" enctype="multipart/form-data" autocomplete="off" action="https://example.com">
<div class="col-md-12">
<div class="col-md-3">
<label>Name : </label><br>
<input type="text" class="form-control" name="name[]" required="" />
</div>
<div class="col-md-6">
<label>Address : </label><br>
<input type="text" class="form-control" name="address[]" required="" />
</div>
<div class="col-md-3">
<label>Occupation : </label><br>
<input type="text" class="form-control" name="occupation[]" required="" />
</div>
<div class="col-md-3">
<label>Mobile : </label><br>
<input type="text" class="form-control" name="mobile[]" required="" />
</div>
<div class="col-md-3">
<label>Email : </label><br>
<input type="text" class="form-control" name="email[]" required="" />
</div>
<div class="col-md-3">
<label>Aadhar No: </label><br>
<input type="text" class="form-control" name="aadhar_no[]" required="" />
</div>
<div class="col-md-3">
<label>Aadhar Image: </label><br>
<input type="file" class="form-control" name="aadhar_image" required="" />
</div>
</div>
<div class="col-md-12">
<div class="col-md-3">
<label>Name : </label><br>
<input type="text" class="form-control" name="name[]" required="" />
</div>
<div class="col-md-6">
<label>Address : </label><br>
<input type="text" class="form-control" name="address[]" required="" />
</div>
<div class="col-md-3">
<label>Occupation : </label><br>
<input type="text" class="form-control" name="occupation[]" required="" />
</div>
<div class="col-md-3">
<label>Mobile : </label><br>
<input type="text" class="form-control" name="mobile[]" required="" />
</div>
<div class="col-md-3">
<label>Email : </label><br>
<input type="text" class="form-control" name="email[]" required="" />
</div>
<div class="col-md-3">
<label>Aadhar No: </label><br>
<input type="text" class="form-control" name="aadhar_no[]" required="" />
</div>
<div class="col-md-3">
<label>Aadhar Image: </label><br>
<input type="file" class="form-control" name="aadhar_image" required="" />
</div>
</div>
<div class="clearfix"> </div>
</form>
如果我是对的,那么表单数据将如下所示:
formData = {
'aadhar_no[]' : ['123456789', '123456789', '123456789', '123456789'],
'address[]' : [],
'csrf_token' : csrf_token,
'email[]' : [],
'member_id' : member_id,
'mobile[]' : [],
'name[]' : [],
'occupation[]' : [],
'aadhar_image' : []
}
HTML 表单数据永远不会通过 Javascript 发送。两个主要类型是 multipart/form-data
,当您有一个文件字段时,它是必需的;application/x-www-form-urlencoded
,这是默认的,并且更紧凑。 multipart/form-data
像 MIME-encoded 电子邮件一样发送:
您的数据将像这样发送。该规范在 RFC 7578 中:https://www.rfc-editor.org/rfc/rfc7578
Content-Type: multipart/form-data, boundary=---1234
---1234
Content-Disposition: form-data; name="name[]"
value-of-name-field
---1234
Content-Disposition: form-data; name="address[]"
value-of-address-field
---1234
Content-Disposition: form-data; name="occupation[]"
value-of-occupation-field
---1234
......
Content-Disposition: form-data; name="aadhar_image[]"
Content-Type: multipart/mixed; boundary=---5678
--5678
Content-Disposition: file; filename="image.jpg"
Content-Type: image/jpg
Content-Transfer-Encoding: binary
.... jpeg image data ...
--5678
--1234
许多 Web 框架会为您将其转换为 JSON,但这不是它通过网络的方式。