Header Ads

Campos Para Cargar Archivos en HTML

Con HTML se puede crear un campo para cargar archivos, en los cuales el usuario puede seleccionar un archivo de su sistema, como un documento de texto, imágenes, vídeos, etc y cargarlos a un servidor. Un campo de archivo tiene la apariencia de un campo de texto pero ademas contienen un Botón, el usuario puede introducir la ruta del archivo que desea cargar manualmente  o buscarla mediante el botón, el cual normalmente lleva el nombre de Examinar. En esta Entrada ejecutaremos un ejemplo para tener una mejor comprensión.

Nuestro campo para cargar archivos sera creado en la etiqueta <input> en la cual añadiremos el atributo type="file", dicho atributo es el que permite obtener mencionado campo.


Código HTML:




Resultado:


Como notamos en el resultado al ejecutar nuestro código HTML se nos mostrara un Botón de examinar o Seleccionar archivo, el cual al dar clic se nos abrirá una ventana en el cual podremos seleccionar el archivo que deseamos cargar.

OJO: los resultados que tengamos de nuestro campo para cargar archivos, varían según el navegador, pero en si la acción que ejecutan es la misma, les recomiendo abrir esta pagina en mas de un navegador para notar las diferencias.

Cualquier duda o aporte hacerlo por comentarios. Gracias por su tiempo!.




18 comentarios:

  1. vacan, pero y el codigo PHP para subir los archivos??

    ResponderEliminar
  2. En firefox y crome no funciona!

    ResponderEliminar
    Respuestas
    1. Hola Anonimo, yo los probé y me funcionan normal!!, claro que es aspecto es diferente pero la acción es la misma....

      Eliminar
    2. hola nestor cunado intento copiar el digip me sale esto

      Artículo sustraído de: http://neytortec1.blogspot.com/2012/12/campos-para-cargar-archivos-en-html.html

      Eliminar
    3. hola nestor cunado intento copiar el digip me sale esto

      Artículo sustraído de: http://neytortec1.blogspot.com/2012/12/campos-para-cargar-archivos-en-html.html

      Eliminar
  3. hola!... yo tengo en firefox version 22.0 y no puedo ver el cuadro de texto. Solo aparece browse y el mensaje No file selected. pero en IE se ve bien el cuadro de texto y el boton de examinar!

    ResponderEliminar
  4. Una pregunta, y el boton de enviar? yo quiero implementar esto para que mis usuarios carguen fotos y al ellos enviarlas que me lleguen a mi email. Como lo hago?

    ResponderEliminar
    Respuestas
    1. Hola Jo Calderon, para que puedas enviar dichos archivos debes obviamente tener un botón enviar que es uno de type="submit" pero eso no es todo también hay que programarlo y eso ya necesita un lenguaje como PHP

      Eliminar
  5. Hola, necesito que me presente la ruta completa

    ResponderEliminar
  6. hola eduardo!!y para cargar la imagen y q se muestre en la web?

    ResponderEliminar
  7. oye amigo me podrías ayudar yo necesito hacer un formulario y quiero que quede mas o menos asi

    Nombre:

    Apellido:

    Correo electrónico:

    y que se pueda cargar un archivo y que se mande directo a mi correo pero que sea solo HTML no se si me podrías ayudar te dejo mi correo por si quieres ayudarme jose-miguel-salas@outlook.es

    ResponderEliminar
  8. Que tal aca con una duda ya tengo eso y quiero que al momento de darle de nuevo al botón me cargue otro archivo sin que el otro lo quite, algo similar a lo que hace wetransfer https://www.wetransfer.com/

    espero puedas darme algún consejo

    gracias

    ResponderEliminar
  9. Hola amigo me podrías ayudar yo necesito hacer un formulario y quiero que quede mas o menos asi Nombre: Apellido: Correo electrónico: y que se pueda cargar un archivo y que se mande directo a mi correo pero que sea solo HTML no se si me podrías ayudar te dejo mi correo por si quieres ayudarme arpazo777@gmail.com

    nombre
    correo
    subir archivos

    ResponderEliminar
  10. algun otro metodo distinto, abra¡¡???

    ResponderEliminar
  11. algun otro metodo distinto, abra¡¡???

    ResponderEliminar
  12. Hola Neytor. ¿Existe un formulario de carga de archivos (texto, foto, mp3 o video) que al enviar el contenido creado (algo como un chat) aparesca en la misma página? Yo estoy creando un sito persona solo en html (sin necesidad de internet) para mi uso en la PC.
    Exactamente yo necesito un cuadro de texto (o formulario) para escribir mi diario, y enviar-guardar en la misma página, para actualizar mi diario personal (pero sin necesidad de conexión a internet). Hay algun javascript u otro lenguaje para esta función? Me ayudas?

    ResponderEliminar
    Respuestas
    1. También estoy en Facebook: https://web.facebook.com/aifuz

      Eliminar