我正在尝试使用具有多个字段的单个表单,包括从 Flask-WTForms 填充的 FileFields。表单发布后,不包含任何数据。当不包含 attachment : form_data,
时,该表单可以正常工作。 (它在提交常规字段之前有效,但是现在我一整天都在尝试添加文件上传但没有成功)。
我的表格如下:
<form class="form-horizontal" enctype="multipart/form-data">
<div class="form-group">
<label class="col-sm-2 control-label">Material Description</label>
<div class="col-sm-10">
{{ form2.description(placeholder='Material Description', class='form-control') }}
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Cost</label>
<div class="col-sm-10">
{{ form2.cost(placeholder='Cost', class='form-control') }}
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Quantity</label>
<div class="col-sm-10">
{{ form2.quantity(placeholder='Quantity', class='form-control') }}
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Used</label>
<div class="col-sm-10">
{{ form2.used(placeholder='Used', class='form-control') }}
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Supplier</label>
<div class="col-sm-10">
{{ form2.supplier(class='form-control') }}
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Attachment</label>
<div class="col-sm-10">
{{ form2.attachment(class='form-control') }}
</div>
</div>
{{ form1.hidden_tag() }}
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button id="materialsButton" type="submit" class="btn btn-default">Add Materials</button>
</div>
</div>
</form>
我的端点处理程序:
@app.route('/api/submit_materials', methods=['POST'])
def submit_materials_api():
form = MaterialsForm()
form.workorder_id.choices = [(work.id, work.id) for work in Workorder.query.order_by(desc('id'))]
if form.validate_on_submit():
workorder_id = form.workorder_id.data
workorder = Workorder.query.filter_by(id = workorder_id).first_or_404()
description = form.description.data
cost = form.cost.data
quantity = form.quantity.data
used = form.used.data
supplier = form.supplier.data
attachment_filename = secure_filename(form.attachment.file.filename)
form.attachment.file.save('static/attachments/' + str(workorder_id) + '_' + attachment_filename)
materials = Materials(description, cost, quantity, used, supplier, attachment_filename)
workorder.work_order_materials.append(materials)
db.session.add(materials)
db.session.commit()
return jsonify({'materials' : materials.description, 'workorder_id' : workorder_id, 'quantity' : quantity})
else:
for field, errors in form.errors.items():
for error in errors:
error_data = (u"Error in the %s field - %s" % (getattr(form, field).label.text, error))
return jsonify({'error' : error_data})
我认为罪魁祸首是我的 JS/jQuery:
$('#materialsButton').click(function (e) {
var form_data = new FormData($('#attachment')[0]);
$.ajax({
type : "POST",
dataType :"json",
url : "/api/submit_materials",
data : {
workorder_id : data.workorder_id,
description : $('#description').val(),
cost : $('#cost').val(),
quantity : $('#quantity').val(),
used : $('#used').val(),
supplier : $('#supplier').val(),
attachment : form_data,
},
contentType : false,
cache : false,
processData : false,
success: function (data) {
if (data.error) {
$("#errorAlert").text(data.error).show();
$("#successAlert").hide();
}
else {
$("#successAlert").text(data.quantity + ' of ' + data.materials + ' successfully added to workorder MCI' + data.workorder_id + '. You may submit additional materials or hours below.').show();
$("#errorAlert").hide();
$("#materialsForm").trigger("reset");
$("#hoursForm").fadeIn("slow");
}
}
});
e.preventDefault();
为了节省空间,这只是整个 JS 脚本的一部分。
最佳答案
在 ajax 请求中使用 formdata 对象时,数据字段必须是 formdata 对象。
$.ajax({
...
data : form_data,
...
});
此外,formdata 构造函数采用表单而不是字段
var form_data = new FormData(this.form);
这会将表单中的所有字段添加到 formdata 对象,然后使用 append()
获取其余数据
form_data.append('workorder_id', data.workorder_id);
关于javascript - AJAX 不发布多字段表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45494159/