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 los archivos que estan en los input
.
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
Supongo que esto se da porque $(this).closest(".file_penal")[0]
no esta funcionando correctamente.
Lo que necesito es ser capaz de tener la referencia a ese input, para (como se observa) despues ser capaz de acceder a .files
y despues a la posición [0] de ese arreglo para obtener la información del archivo (no quiero el archivo en si). De esa forma puedo ponerlo en un FormData() y mandarlo.
Asi pues, ¿como llego a estos inputs con Jquery?