En mi proyecto, tengo un listado de personas y para cada una se tiene la posibilidad de adjuntar dos archivos. Al presionar un boton, se deben subir estos dos archivos al servidor para que queden como evidencia para esta persona en especifico.
Mi problema es que no puedo obtener la información de estos input
tipo file
.
Mi tabla se ve algo asi:
<table id="miTabla">
<tr>
<th>Cif</th><th>Nombre</th><th>Agencia</th><th>Antecedente Penal</th><th>Antecedente Policiaco</th><th>Validación</th>
</tr>
<tr>
<td>1</td>
<td>Juan Garcia</td>
<td>Agencia 1</td>
<td>1234<br><input class="file_penal" type="file" name="Examinar" style="width: 105px;"/> </td>
<td>4321<br><input class="file_policiaco" type="file" name="Examinar" style="width: 105px;"/></td>
<td><button class="btn btn-default" value="1" >Validar</button></td>
</tr>
<tr>
<td>2</td>
<td>Carlos Perez</td>
<td>Agencia 2</td>
<td>4321<br><input class="file_penal" type="file" name="Examinar" style="width: 105px;"/> </td>
<td>1234<br><input class="file_policiaco" type="file" name="Examinar" style="width: 105px;"/></td>
<td><button class="btn btn-default" value="2" >Validar</button></td>
</tr>
<tr>
<td>3</td>
<td>Oscar Maldonado</td>
<td>Agencia 3</td>
<td>1234<br><input class="file_penal" type="file" name="Examinar" style="width: 105px;"/> </td>
<td>4321<br><input class="file_policiaco" type="file" name="Examinar" style="width: 105px;"/></td>
<td><button class="btn btn-default" value="3" >Validar</button></td>
</tr>
<table>
Mi archivo con funciones JQuery se ve algo asi:
$("#tabla-validar-antecedentes").on("click",".btn-default",function(){
var cif = $(this).val();
var input1 = $(this).closest(".file_penal")[0];
var input2 = $(this).closest(".file_policiaco")[0];
var filepenal = input1.files[0];
var filepoliciaco = input2.files[0];
var _data = new FormData();
_data.append('_cif',cif);
_data.append('filepenal',filepenal);
_data.append('filepoliciaco',filepoliciaco);
$.ajax({
url: "validacion_antecedentes.php",
type: 'POST',
data: _data,
contentType: false,
processData: false,
success:function(postresult)
{//hacer muchas cosas si todo sale bien...}
});
});
Entonces, escojo los archivos que necesito y cuando doy click al boton, en mi pantalla no se ve nada y en la consola se muestra el siguiente error:
TypeError: input1 is undefined
Tambien cuando hago un alert
de input1
me sale undefined
.
¿Qué estoy haciendo mal? ¿Es la forma en que trato de llegar al input
? ¿Como se obtiene la información del input para mandarla al lado del servidor?