起点:我有一个具有多种表单的网站,如下所示:
<form class="form card-content-ingredients" action="" id="form-id-0" enctype="multipart/form-data">
<ul>
<li class="form__item">
<label class="form__label" for="name">Text</label>
<input class="form__input form__input--textfield" type="text" name="description" value="" placeholder="description">
</li>
<li class="form__item">
<label class="btn btn--invalid" for="file" >picture</label>
<input class="form__input form__input--file" id="file" type="file" name="img" value="picture">
</li>
<ul class="form__item--multi-align-right">
<li>
<input class="btn btn--invalid" type="button" value="cancel">
</li>
<li>
<input class="btn btn--invalid btn__save" type="button" value="Save" data-item-id="0" data-rqstPath="/xyz">
</li>
</ul>
</ul>
</form>
当我单击“保存”时,会发出 AJAX 请求,传输 FormData 界面中的所有数据(包括文件)。
我的问题是:仅传输第一个表单元素中的文件。对于所有其他表单,当我单击“保存”时,不包含文件输入字段,但奇怪的是所有其他输入字段。当我改变表格的顺序时,它仍然具有相同的效果。 我只使用一个 JS 函数来处理表单数据,如下所示:
function updateSettingsAJAX( itemID, rqstPath) {
if (!(typeof itemID !== typeof undefined && itemID !== false) ||
!(typeof rqstPath !== typeof undefined && rqstPath !== false)) {
return false;
}
var formData = new FormData($('#form-id-' + itemID)[0]);
formData.append("itemID", itemID);
return $.ajax({
type: "POST",
url: rqstPath,
data: formData,
processData: false,
contentType: false,
});
如果有人能帮助我解决我的问题,我将非常感激。
最佳答案
根据我在评论中的建议,代表 OP 发帖;
文件中存在重复 ID <input>
导致了标签的触发输入字段总是触发第一个字段的问题。
顺便说一句 - 这是一个旧标准,但仍然值得遵守 - ID's must be unique
关于javascript - html 表格 ||表单数据|| Ajax ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41447655/