Cargar imagen con jQuery en HTML5

Introducción

Si estás buscando una manera sencilla y eficaz de permitir que los usuarios carguen imágenes en tu sitio web HTML5, jQuery puede ser tu mejor aliado. Con su ayuda, puedes crear una función que te permita cargar imágenes de manera dinámica y personalizable. En este tutorial, te enseñaremos cómo hacerlo paso a paso.

Configuración del archivo HTML

Antes de empezar, debemos asegurarnos de tener un archivo HTML básico que incluya la estructura de la página y el código necesario para cargar jQuery. Asegúrate de tener la última versión de jQuery incluida en tu proyecto.

Creación de la función de carga de imágenes

La función que vamos a crear permitirá al usuario seleccionar una imagen de su ordenador y mostrarla en la página. Empezaremos creando un control de entrada de archivo con el elemento <input> de tipo «file». Luego, crearemos la función que se ejecutará cuando el usuario cargue la imagen.

Procesamiento de la imagen

Una vez que el usuario ha seleccionado la imagen, necesitamos procesarla para poder mostrarla en la página. Para ello, utilizaremos la API FileReader de HTML5. Esta API nos permite leer archivos y mostrarlos en la página. Veremos cómo hacerlo paso a paso.

Mostrar la imagen en la página Finalmente, necesitamos mostrar la imagen en la página. Para ello, simplemente actualizamos el atributo «src» del elemento <img> que creamos antes. Veremos cómo hacerlo en este paso.

Código completo

<!DOCTYPE html>
<html lang=«en»>
<head>
    <meta charset=«UTF-8»>
    <meta http-equiv=«X-UA-Compatible» content=«IE=edge»>
    <meta name=«viewport» content=«width=device-width, initial-scale=1.0»>
    <title>Document</title>
    <script language=«JavaScript» type=«text/javascript» src=«jquery.js» charset=«utf-8»></script>
    <script type=«text/javascript» language=«javascript»>
    $(window).load(function(){
    
     $(function() {
      $(‘#file-input’).change(function(e) {
          addImage(e); 
         });
    
         function addImage(e){
          var file = e.target.files[0],
          imageType = /image.*/;
        
          if (!file.type.match(imageType))
           return;
      
          var reader = new FileReader();
          reader.onload = fileOnload;
          reader.readAsDataURL(file);
         }
      
         function fileOnload(e) {
          var result=e.target.result;
          $(‘#imgSalida’).attr(«src»,result);
         }
        });
      });
    </script>
</head>
<body>
    <input name=«file-input» id=«file-input» type=«file» />
    <br />
    <img id=«imgSalida» width=«50%» height=«50%» src=«» />
</body>
</html>

Conclusión

Gracias a jQuery y HTML5, cargar imágenes en tu sitio web puede ser muy fácil. Esperamos que este tutorial te haya resultado útil y que puedas aplicar lo aprendido en tus proyectos futuros. Si tienes alguna duda o comentario, no dudes en hacérnoslo saber en la sección de comentarios.