php not receives data from ajax FormData - php

Question

I'm trying to send multiple data and files by jquery ajax (using formData) to a php file but i don't recive anything in the php file neither $_POST nor $_FILE data, I receive NULL in both.
Here is my ajax function.
$('#formulario').submit(function(e){
e.preventDefault();
$.ajax({
url:"../phpfile.php",
type:"POST",
dataType:"JSON",
data: new FormData(this),
processData: false,
contentType: false
}).always(function(respuesta){
//code
});
});
Here is my HTML
<form enctype="multipart/form-data" method="POST">
<div class='row'>
<div class='col-xs-12'>
<h4>Destinatarios</h4>
<select class='form-control' required name='destinatarios[]' title='Selecciona cuantos quieras' multiple data-selected-text-format="count>2" data-live-search="true">
{%for familiar in familia%}
<option value='{{familiar.ID_PERSONA}}'>{{familiar.NOMBRE}} {{familiar.APELLIDOS}}</option>
{%endfor%}
</select>
</div>
<div class='col-xs-6 hidden'>
<h4>Tipo de entrega</h4>
<select class='form-control' id='entrega' name='entrega'>
<option value='1' selected></option>
</select>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class='col-xs-4 text-center'>
<h4>Despues de mi partida</h4>
<input type="radio" value="muerte" name="tipoE" onchange="cambioR(this)">
</div>
<div class='col-xs-4 text-center'>
<h4>En fecha determinada</h4>
<input type="radio" value="fecha" name="tipoE" onchange="cambioR(this)">
</div>
<div class='col-xs-4 text-center'>
<h4>En mi ceremonia de despedida</h4>
<input type="radio" value="ceremonia" name="tipoE" onchange="cambioR(this)">
</div>
</div>
<br>
<div class="row">
<div id="f" class="hidden">
<div class="col-xs-12">
<div class="input-group date" id="sandbox-container">
<span class="input-group-addon">Fecha</span>
<input type="text" class="form-control date" placeholder="dd/mm/yyyy" name="fecha" id="fecha">
</div>
<br>
</div>
</div>
<div id="m" class="hidden">
<div class="col-xs-12">
<div class="input-group">
<span class="input-group-addon">Días después de mi partida</span>
<input class="form-control" id="muerte" name="muerte">
</div>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h4>Mensaje</h4>
<input class="hidden" id="nombre_mensaje" name="nombre_mensaje">
<textarea class="form-control" rows="10" style="resize: none" id='mensaje' name='mensaje' required></textarea>
<br>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h4>Imágenes / Video / Audio / Archivos</h4>
<div class="grid" id="muestras" dc>
<div class="grid-item col-xs-3 deseo" onclick="novoFile(this);">
<img src="../Recursos/imagenes/plus.jpg" width="100%;">
<input class="hidden" type="file" onchange="cambio(this);" name="files[]">
<input class="hidden datas" name="data_multimedia[]" value="0">
</div>
</div>
</div>
</div>
<input class="hidden" id="id_mensaje" name="id_mensaje">
<input type="reset" id="reiniciar" hidden>
</form>
The user can upload as many files as he want, and the html input file is added dinamicly using jquery.

Answer 1

Try to replace:
new FormData(this);
with:
$('#formulario').serialize();