2

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?

1 respuesta 1

2

Para encontrar tu input file solo deberías hacer:

$(this).closest("tr").find('.file_penal')[0]

$("#tabla-validar-antecedentes").on("click",".btn-default",function(){

  console.log($(this).closest("tr").first().html());
      
      var input1 = $($(this).closest("tr").find('.file_penal')[0]);       console.log(input1.val());

      });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tabla-validar-antecedentes">
    <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>

1
  • Genial! Gracias! Sabia que no era tan dificil, pero estaba un poco saturado. Commented el 22 sept. 2017 a las 20:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.