This question already has answers here:
</div>
</div>
<div class="grid--cell mb0 mt4">
<a href="/questions/29791355/upload-image-using-jquery" dir="ltr">Upload image using jquery</a>
<span class="question-originals-answer-count">
(2 answers)
</span>
</div>
<div class="grid--cell mb0 mt4">
<a href="/questions/2320069/jquery-ajax-file-upload" dir="ltr">jQuery Ajax File Upload</a>
<span class="question-originals-answer-count">
(24 answers)
</span>
</div>
<div class="grid--cell mb0 mt8">Closed <span title="2018-02-02 15:01:05Z" class="relativetime">2 years ago</span>.</div>
</div>
</aside>
I'm having troubles passing the information of a dropify input using Ajax. It sends all the data except the image.
HTML:
<form class="js-validation-addlang" method="post" enctype="multipart/form-data" id="add-lang-form">
<div class="form-group row">
<label class="col-6 col-form-label">Language Name</label>
<label class="col-6 col-form-label">Language Code</label>
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control" id="lang_name" name="lang_name">
<span class="input-group-addon"><i class="fa fa-file"></i></span>
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control" id="lang_code" name="lang_code">
<span class="input-group-addon"><img src="/assets/img/flags/def.png" id="flag-icon"></span>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-12" for="lang_tags">Language Tags</label>
<div class="col-lg-12">
<div class="input-group">
<input type="text" class="form-control" id="lang_tags" name="lang_tags">
<span class="input-group-addon"><i class="fa fa-list"></i></span>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-md-12">Image</label>
<div class="col-md-12">
<input type="file" id="lang_img" name="lang_img" class="dropify" />
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<button type="submit" class="btn btn-alt-primary pull-right">Submit</button>
</div>
</div>
</form>
JS:
var data = $("#add-lang-form").serialize();
$.ajax({ url: 'My_PHP_FILE',
data: {
dados: JSON.stringify(data),
caller: 'addlang',
},
type: 'POST',
beforeSend: function(){
$("#add_btn").html('<i class="fa fa-2x fa-cog fa-spin"></i>');
$("#add_btn").attr("disabled", true);
},
success: function(output) {
...
In the var "dados" I have all the information for lang_name, lang_tags and lang_code, but the file input with id lang_img is missing.
What I'm missing here? Hope you could help me. Thanks.
EDIT: Full Code:
var OpAuthValAddLang = function() {
// Init Sign In Form Validation, for more examples you can check out https://github.com/jzaefferer/jquery-validation
var initValidationAddLanguage = function(){
jQuery('.js-validation-addlang').validate({
errorClass: 'invalid-feedback animated fadeInDown',
errorElement: 'div',
errorPlacement: function(error, e) {
jQuery(e).parents('.form-group > div').append(error);
},
highlight: function(e) {
jQuery(e).closest('.form-group').removeClass('is-invalid').addClass('is-invalid');
},
success: function(e) {
jQuery(e).closest('.form-group').removeClass('is-invalid');
jQuery(e).remove();
},
rules: {
'lang_name': {
required: true
},
'lang_code': {
required: true,
minlength: 2
},
'lang_tags': {
required: true
},
'lang_img': {
required: true
}
},
messages: {
'lang_name': {
required: 'Please enter a Language Name',
},
'lang_code': {
required: 'Please provide a Language Code',
minlength: 'The Language Code should have at least 2 characters'
},
'lang_tags' : {
required: 'Please insert Language tags',
},
'lang_img' :{
required: 'Please select the image to upload',
}
},
submitHandler: AddLang
});
};
function AddLang()
{
event.preventDefault();
//var data = $("#add-lang-form").serialize();
var form = document.getElementById('add-lang-form');
var formData = new FormData(form);
$.ajax({ url: 'PHP_FILE',
data: {
//dados: JSON.stringify(data),
dados: formData,
caller: 'addlang',
},
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
type: 'POST',
beforeSend: function(){
$("#login_btn").html('<i class="fa fa-2x fa-cog fa-spin"></i>');
$("#login_btn").attr("disabled", true);
},
success: function(output) {
if(output == "OK"){
alert("OK");
}else{
$("#login_btn").html('<i class="si si-login mr-10"></i> Sign In');
$("#login_btn").attr("disabled", false);
$.notify({
// options
icon: 'fa fa-close',
title: 'Error',
//message: 'It seems everything went ok :)',
message: output,
},{
// settings
element: 'body',
position: null,
type: "danger",
allow_dismiss: true,
newest_on_top: true,
placement: {
from: "top",
align: "right"
},
offset: 20,
spacing: 10,
z_index: 1031,
delay: 10000,
timer: 1000,
url_target: '_blank',
mouse_over: null,
animate: {
enter: 'animated fadeInDown',
exit: 'animated fadeOutUp'
},
onShow: null,
onShown: null,
onClose: null,
onClosed: null,
icon_type: 'class',
template: '<div data-notify="container" class="col-xs-11 col-sm-3 alert alert-{0}" role="alert">' +
'<button type="button" aria-hidden="true" class="close" data-notify="dismiss">×</button>' +
'<span data-notify="icon"></span> ' +
'<span data-notify="title"><strong>{1}</strong></span> ' +
'<span data-notify="message">{2}</span>' +
'<div class="progress" data-notify="progressbar">' +
'<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
'</div>' +
'<a href="{3}" target="{4}" data-notify="url"></a>' +
'</div>'
});
}
}
});
};
return {
init: function () {
// Init Sign In Form Validation
initValidationAddLanguage();
}
};
}();
// Initialize when page loads
jQuery(function(){ OpAuthValAddLang.init(); });
If someone could help me I'd appreciate. My knowledge in JS is not good.
</div>
