PHP - Capturar fichero de input file y agregarlo a textbox

   
Vista:

Capturar fichero de input file y agregarlo a textbox

Publicado por William (6 intervenciones) el 24/03/2018 02:50:06
Hola a todos.

Tengo lo siguiente: http://prntscr.com/ivl8kb

Lo que quiero lograr es capturar el nombre y la extensión del fichero seleccionado(Fichero.txt) y que este se agregue automáticamente al Textbox "Descarga".

Estaría muy agradecido si alguien me pudiera ayudar.

Aquí adjunto código:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<?php
require 'db.php';
$message = '';
if (isset ($_POST['Identificacion']) && isset($_POST['Programa'])  && isset($_POST['Descarga']) ) {
  $NumeroID = $_POST['Identificacion'];
  $Programa = $_POST['Programa'];
  $Descarga = $_POST['Descarga'];
  $sql = 'INSERT INTO estudiantes(Identificacion, Programa, Descarga) VALUES(:Identificacion, :Programa, "certificados/":Descarga)';
  $statement = $connection->prepare($sql);
  if ($statement->execute([':Identificacion' => $NumeroID, ':Programa' => $Programa, ':Descarga' => $Descarga])) {
    $message = 'Registro agregado correctamente.';
  }
}
 
 
 ?>
<?php require 'header.php'; ?>
<div class="container">
  <div class="card mt-5">
    <div class="card-header">
      <h2>Agregar Registro</h2>
    </div>
    <div class="card-body">
      <?php if(!empty($message)): ?>
        <div class="alert alert-success">
          <?= $message; ?>
        </div>
      <?php endif; ?>
      <form method="post">
        <div class="form-group">
          <label for="Identificacion">Identificación</label>
          <input type="text" name="Identificacion" id="Identificacion" class="form-control">
        </div>
        <div class="form-group">
          <label for="Programa">Programa</label>
          <input type="Programa" name="Programa" id="Programa" class="form-control">
        </div>
        <div class="form-group">
          <label for="Descarga">Descarga</label>
          <input type="Descarga" name="Descarga" id="Descarga" class="form-control">
        </div>
        <div class="form-group">
          <button type="submit" class="btn btn-info">Agregar Registro</button>
        </div>
      </form>
      <form action="./uploader.php" method="POST" enctype="multipart/form-data">
      <input type="file" name="archivo">
      <input type="submit" value="ENVIAR">
    </form>
    </div>
  </div>
</div>
<?php require 'footer.php'; ?>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Capturar fichero de input file y agregarlo a textbox

Publicado por xve (6808 intervenciones) el 24/03/2018 10:13:01
Hola William, revisa este código... ahí veras como puedes obtener el nombre del archivo utilizando fileReader de JavaScript.
https://www.lawebdelprogramador.com/codigo/JavaScript/4314-Mostrar-una-imagen-con-javascript-sin-enviarla-al-servidor.html
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Capturar fichero de input file y agregarlo a textbox

Publicado por William (6 intervenciones) el 24/03/2018 17:07:21
Agradezco tu respuesta pero, lamentablemente no es lo que estoy buscando
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de santi

Capturar fichero de input file y agregarlo a textbox

Publicado por santi (157 intervenciones) el 24/03/2018 18:02:55
Hola,

por defecto, un input sin el atributo "type" muestra un campo de texto pero lo que no debes hacer es ponerle un type="Descargar" porque no te lo va a dar por bueno a la hora de validar el html...

A parte de esto, prueba con esto -> https://stackoverflow.com/questions/13780309/get-filename-from-input-type-file-using-jquery

Comenta a ver si funciona ;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Capturar fichero de input file y agregarlo a textbox

Publicado por William (6 intervenciones) el 27/03/2018 02:43:05
Vale, corregí lo del "type" pero, aún no logro ingresar el nombre del fichero automáticamente al form-control(textbox). Igualmente gracias por responder!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Capturar fichero de input file y agregarlo a textbox

Publicado por italo (110 intervenciones) el 27/03/2018 06:14:23
hola, he agregado los enlaces a jquery, los puedes borrar si ya los tienes en tu index....

necesitas hacerlo con js o jquery, en este ejemplo use jquery...

se cambio de esto:

1
<input type="file" name="archivo"

a esto: se agrego class="custom-file-input" para que jquery pueda trabajar en el evento change

1
<input type="file" name="archivo" class="custom-file-input">

de esto:

1
<input type="text" name="Descarga" id="Descarga" class="form-control">

a esto: para que no se pueda modificar el nombre del file, solo se puede ver con readonly

1
<input type="text" name="Descarga" id="Descarga" class="form-control" readonly>

este es el codigo jquery, practicamente

- cada vez que se selecciona un nuevo file: (evento change)
- se captura el nombre del arichivo y se memoriza en: nombre_file
- si esta valorizado: if (nombre_file) {
- se valoriza el valor (value) de elemento type con id #Descarga: $('#Descarga').val(nombre_file.name);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 
 <script type="text/javascript">
// capturo el nombre del file y lo escribo en el value del id #Descarga
  $(document).ready(function () {
    $('.custom-file-input').change(function () {
      var nombre_file = $('.custom-file-input')[0].files[0]
      if (nombre_file) {
        $('#Descarga').val(nombre_file.name);
        //console.log(nombre_file.name);
      }
    });
  });
</script>


este es el codigo completo, pruebalo en test,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
 
 <script type="text/javascript">
// capturo el nombre del file y lo escribo en el input text Programa
  $(document).ready(function () {
    $('.custom-file-input').change(function () {
      var nombre_file = $('.custom-file-input')[0].files[0]
      if (nombre_file) {
        $('#Descarga').val(nombre_file.name);
        //console.log(nombre_file.name);
      }
    });
  });
</script>
 
<?php
require 'db.php';
$message = '';
if (isset ($_POST['Identificacion']) && isset($_POST['Programa'])  && isset($_POST['Descarga']) ) {
  $NumeroID = $_POST['Identificacion'];
  $Programa = $_POST['Programa'];
  $Descarga = $_POST['Descarga'];
  $sql = 'INSERT INTO estudiantes(Identificacion, Programa, Descarga) VALUES(:Identificacion, :Programa, "certificados/":Descarga)';
  $statement = $connection->prepare($sql);
  if ($statement->execute([':Identificacion' => $NumeroID, ':Programa' => $Programa, ':Descarga' => $Descarga])) {
    $message = 'Registro agregado correctamente.';
  }
}
 
 
 ?>
<?php require 'header.php'; ?>
<div class="container">
  <div class="card mt-5">
    <div class="card-header">
      <h2>Agregar Registro</h2>
    </div>
    <div class="card-body">
      <?php if(!empty($message)): ?>
        <div class="alert alert-success">
          <?= $message; ?>
        </div>
      <?php endif; ?>
      <form method="post">
        <div class="form-group">
          <label for="Identificacion">Identificación</label>
          <input type="text" name="Identificacion" id="Identificacion" class="form-control">
        </div>
        <div class="form-group">
          <label for="Programa">Programa</label>
          <input type="text" name="Programa" id="Programa" class="form-control">
        </div>
        <div class="form-group">
          <label for="Descarga">Descarga</label>
          <input type="text" name="Descarga" id="Descarga" class="form-control" readonly>
        </div>
        <div class="form-group">
          <button type="submit" class="btn btn-info">Agregar Registro</button>
        </div>
      </form>
      <form action="./uploader.php" method="POST" enctype="multipart/form-data">
      <input type="file" name="archivo" class="custom-file-input">
      <input type="submit" value="ENVIAR">
    </form>
    </div>
  </div>
</div>
<?php require 'footer.php'; ?>


si tienes errores escribe cual es, escribe el codigo y explica el problema.


salud2
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar

Capturar fichero de input file y agregarlo a textbox

Publicado por William (6 intervenciones) el 27/03/2018 16:23:20
Muchas gracias! Ningún error en el código.
De verdad te lo agradezco mucho!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Revisar política de publicidad