如何解决发送dropzone以及表单中的其他数据,而无需指定每个输入字段
我正在使用dropzone以表格形式发送附件。我的问题是dropzone是它自己的表单,因此我进行了一些搜索,找到了如何在现有的html表单中使用dropzone并在一个发布请求中发送所有内容。
问题是我现在需要的解决方案需要我指定表单中存在的每个输入字段。有没有一种方法可以将整个表单发布到我的js代码中?
我有很多输入字段,并且必须可以只发送带有附加附件的整个表单,而不是将每个输入字段都附加到dropzone帖子中。
JS:
Dropzone.options.myDropzone= {
url: 'upload.php',autoProcessQueue: false,uploadMultiple: true,parallelUploads: 5,maxFiles: 5,maxFilesize: 1,addRemoveLinks: true,init: function() {
dzClosure = this; // Makes sure that 'this' is understood inside the functions below.
// for Dropzone to process the queue (instead of default form behavior):
document.getElementById("submitschade").addEventListener("click",function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
dzClosure.processQueue();
});
//send all the form data along with the files:
this.on("sendingmultiple",function(data,xhr,formData) {
//Example fields,not from my actual form:
formData.append("firstname",jQuery("#firstname").val());
formData.append("lastname",jQuery("#lastname").val());
});
}
}
我的表单:
<form class="" enctype="multipart/form-data" action="/" method="post">
<div class="form-group row">
<div class="col-sm-6">
<label for="example-text-input" class="col-form-label formlabel">Datum & tijdstip schade</label>
<input class="form-control" type="datetime-local">
</div>
<div class="col-sm-6">
<label for="example-text-input" class="col-form-label formlabel">Locatie aanrijding</label>
<input class="form-control" type="text">
</div>
<div class="col-sm-12">
<label for="example-text-input" class="col-form-label formlabel">Andere materiele schade dan voertuig(en)</label>
<select class="form-control">
<option selected disabled>Maak keuze</option>
<option>Nee</option>
<option>Ja</option>
</select>
</div>
</div>
<h2 class="mb-3">Bestuurder</h2>
<div class="form-group row">
<div class="col-sm-6">
<label for="example-text-input" class="col-form-label formlabel">Voornaam</label>
<input class="form-control" type="text">
</div>
<div class="col-sm-6">
<label for="example-text-input" class="col-form-label formlabel">Achternaam</label>
<input class="form-control" type="text">
</div>
<div class="col-sm-6">
<label for="example-text-input" class="col-form-label formlabel">Straatnaam en huisnummer</label>
<input class="form-control" type="text">
</div>
<div class="col-sm-6">
<label for="example-text-input" class="col-form-label formlabel">Postcode</label>
<input class="form-control" type="text">
</div>
<div class="col-sm-6">
<label for="example-text-input" class="col-form-label formlabel">Woonplaats</label>
<input class="form-control" type="text">
</div>
<div class="col-sm-6">
<label for="example-text-input" class="col-form-label formlabel">Telefoonnummer</label>
<input class="form-control" type="text">
</div>
<div class="col-sm-6">
<label for="example-text-input" class="col-form-label formlabel">Rijbewijsnummer</label>
<input class="form-control" type="text">
</div>
<div class="col-sm-6">
<label for="example-text-input" class="col-form-label formlabel">Rijbewijs type</label>
<br>
<label for="example-text-input" class="col-form-label formlabel">A</label>
<input type="checkbox" value="A">
<label for="example-text-input" class="col-form-label formlabel">B</label>
<input type="checkbox" value="B">
<label for="example-text-input" class="col-form-label formlabel">C</label>
<input type="checkbox" value="C">
<label for="example-text-input" class="col-form-label formlabel">D</label>
<input type="checkbox" value="D">
<label for="example-text-input" class="col-form-label formlabel">E</label>
<input type="checkbox" value="E">
</div>
</div>
<h2 class="mb-3">Voertuig</h2>
<div class="form-group row">
<div class="col-sm-6">
<label for="example-text-input" class="col-form-label formlabel">Merk / Type</label>
<input class="form-control" type="text">
</div>
<div class="col-sm-6">
<label for="example-text-input" class="col-form-label formlabel">Kenteken</label>
<input class="form-control" type="text">
</div>
</div>
<h2 class="mb-3">Bijlages</h2>
<div class="form-group row">
<div class="col-sm-12">
<div class="dropzone" id="myDropzone">
<div class="fallback">
<input name="file" type="file" multiple="multiple">
</div>
<div class="dz-message needsclick">
<div class="mb-3">
<i class="display-4 text-muted mdi mdi-cloud-upload"></i>
</div>
<h4>Sleep je bestanden of klik hier om bestanden bij te voegen</h4>
</div>
</div>
</div>
</div>
<div class="text-center mt-3">
<input type="submit" name="submitschade" id="submitschade" value="Schadeformulier verzenden">
</div>
</form>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。