Dropzonejs按下提交按钮时如何发送表单域并上传文件 [英] Dropzonejs How to send form fields and upload the file when submit button is pressed
本文介绍了Dropzonejs按下提交按钮时如何发送表单域并上传文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是jQuery和Dropzone.js中的新成员，所以我的问题是我无法使用上传的文件发送表单数据。这是我的代码：
表单：
< form class =form-horizontalid =validation-formmethod =get>
< div class =form-group>
< label class =control-label col-xs-12 col-sm-3 no-padding-rightfor =carrier> Carrier< / label>
< div class =col-xs-12 col-sm-6>
< option value =>& nbsp;< / option>
< option value =FEDEX> FEDEX< / option>
< option value =UPS> UPS< / option>
< option value =DHL> DHL< / option>
< option value =USPS> USPS< / option>
< option value =其他>其他< / option>
< / select>
< / div>
< / div>
Dropzone零件：
< div id =dropzoneclass =dropzone alert alert-success>
< div class =dz-message dropzone-previews>
< h2点亮绿色>拖动PDF。< / h2>
< span class =glyphicon glyphicon-send>< / span>
< / div>
< / div>
这是我的dropzone脚本代码：
< script type =text / javascript>
$（document）.ready（function（）{
Dropzone.autoDiscover = false;
$（＃dropzone）。dropzone（{$ b $ url：uploads.php ，
autoProcessQueue：false，
previewsContainer：.dropzone-previews，
uploadMultiple：false，
addRemoveLinks：false，
// addRemoveLinks：true，
maxFiles：1，
maxFileSize：1000，
dictResponseError：Ha ocurrido un error en el server，
acceptedFiles：'application / pdf'，
}）;
}）;
< / script>
这是能够发送表单数据的ajax。
submitHandler：function（form，file）{
$（＃loading）。html（'< img src =imagenes /cargando.gifwidth =50height =50/>< br />< a href =＃> Grabando Pre-Alerta< / a>'）;
$ .ajax（{
type：'POST'，
url：uploads.php，
data：{
carrier：$（ val（），
val（），
store：$（＃tienda） descripcion_envio：$（＃confirmacion）。val（），
tracking_number：$（＃tracking）.val（）
}，
dataType：'json'，
成功：函数（数据）{
$（＃loading）。html（''）;
if（data.resultado ==false）{
$（'＃texto_popup_error'）。html（Usuario ocontraseñaincorrectos）;
$（'＃errorIngreso'）。modal（'show'）
} else {
if（data.no_prealerta ==0）{
$（'＃texto_popup_error'）。html（Error al grabar la PreAlerta o bien ya fue grabada。Intente de nuevo。Si tiene el mismo error su Tracking ）;
$（'＃errorIngreso'）。modal（'show'）
} else {
document.getElementById（tienda）。value =;
document.getElementById（valor）。value =;
document.getElementById（confirmacion）。value =;
document.getElementById（tracking）。value =;
$（'＃texto_popup_error'）。html（No。de alerta generada：+ data.no_prealerta）;
$（'＃errorIngreso'）。modal（'show'）
}
}
}
}）;
}，
invalidHandler：function（form）{}
}）;
所以，问题是如何上传文件并同时从.ajax发送数据。按提交按钮。
解决方案
代替调用全新的ajax请求，您可以捕获发送 dropzone 函数的事件，并将表单值直接附加到它：
<$ p $ （
url：uploads.php，
//....etc
发送：function（（））{code> $（＃dropzone）。文件，xhr，formData）{
formData.append（carrier，$（'＃carrier'）。val（））;
formData.append（store，$（'＃tienda' ）.val（））;
formData.append（valor，$（'＃valor'）。val（））;
formData.append（descripcion_envio，$（'＃confirmacion' ）.val（））;
formData.append（tracking_number，$（'＃tracking'）.val（））;
}
//...etc
}）;
I'm new in jQuery and Dropzone.js, So, my issue is that I'm unable to send form data with uploaded file. this is my code:
Form:
<form class="form-horizontal" id="validation-form" method="get">
<div class="form-group">
<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="carrier">Carrier</label>
<div class="col-xs-12 col-sm-6">
<select id="carrier" name="carrier" class="select2" data-placeholder="Select...">
<option value=""> </option>
<option value="FEDEX">FEDEX</option>
<option value="UPS">UPS</option>
<option value="DHL">DHL</option>
<option value="USPS">USPS</option>
<option value="Others">Others</option>
</select>
</div>
</div>
Dropzone Part:
<div id="dropzone" class="dropzone alert alert-success ">
<div class="dz-message dropzone-previews">
<h2 lighter block green>Drag PDF.</h2>
<span class="glyphicon glyphicon-send"></span>
</div>
</div>
This is my script code of the dropzone:
<script type="text/javascript" >
$(document).ready(function() {
Dropzone.autoDiscover = false;
$("#dropzone").dropzone({
url: "uploads.php",
autoProcessQueue: false,
previewsContainer: ".dropzone-previews",
uploadMultiple: false,
addRemoveLinks: false,
//addRemoveLinks: true,
maxFiles: 1,
maxFileSize: 1000,
dictResponseError: "Ha ocurrido un error en el server",
acceptedFiles: 'application/pdf',
});
});
</script>
And this is the ajax that is able to send the data of the form.
submitHandler: function(form, file) {
$("#loading").html('<img src="imagenes/cargando.gif" width="50" height="50" /><br /><a href="#">Grabando Pre-Alerta</a>');
$.ajax({
type: 'POST',
url: "uploads.php",
data: {
carrier: $("#carrier").val(),
store: $("#tienda").val(),
valor: $("#valor").val(),
descripcion_envio: $("#confirmacion").val(),
tracking_number: $("#tracking").val()
},
dataType: 'json',
success: function(data) {
$("#loading").html('');
if (data.resultado == "false") {
$('#texto_popup_error').html("Usuario o contraseña incorrectos");
$('#errorIngreso').modal('show')
} else {
if (data.no_prealerta == "0") {
$('#texto_popup_error').html("Error al grabar la PreAlerta o bien ya fue grabada. Intente de nuevo. Si tiene el mismo error su Tracking Number ya fue grabado.");
$('#errorIngreso').modal('show')
} else {
document.getElementById("tienda").value = "";
document.getElementById("valor").value = "";
document.getElementById("confirmacion").value = "";
document.getElementById("tracking").value = "";
$('#texto_popup_error').html("No. de alerta generada: " + data.no_prealerta);
$('#errorIngreso').modal('show')
}
}
}
});
},
invalidHandler: function(form) {}
});
So, the question is how to upload file and send the data from .ajax at the same time when press submit button.
解决方案
Instead of invoking an entirely new ajax request, you can just capture the sending event of the dropzone function and append your form values directly to it:
$("#dropzone").dropzone({
url: "uploads.php",
//....etc
sending: function(file, xhr, formData) {
formData.append("carrier", $('#carrier').val());
formData.append("store", $('#tienda').val());
formData.append("valor", $('#valor').val());
formData.append("descripcion_envio", $('#confirmacion').val());
formData.append("tracking_number", $('#tracking').val());
}
//...etc
});
这篇关于Dropzonejs按下提交按钮时如何发送表单域并上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
