elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Introducción a la Factorización De Semiprimos (RSA)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Pregunta]: Progress bar o preloader al subir una imagen
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Pregunta]: Progress bar o preloader al subir una imagen  (Leído 446 veces)
Leguim


Desconectado Desconectado

Mensajes: 671



Ver Perfil
[Pregunta]: Progress bar o preloader al subir una imagen
« en: 22 Agosto 2019, 16:33 pm »

¡Buenos días!

Estoy creando un pequeñito sistema donde el usuario hará click en un botón "Subir foto" y al darle click dicha imagen se podrá pre-visualizar aunque el usuario todavía no la haya subido.

Es decir, una vez que selecciona la foto te muestra la imagen pero no quiere decir que el usuario la haya subido. Eso ya lo pude hacer y creo que me quedo muy bien.

La pregunta sería como puedo hacer para que en el transcurso de tiempo desde cuando le doy click a "seleccionar imagen" hasta que se "subió" o mejor dicho cargo el valor al input de tipo "file" se me muestre un preloader o mejor aún un progress bar el diseño y esas cosas las hago yo no hace falta que se rompan la cabeza tampoco.

HTML
Código
  1. // En el html
  2. <input type="file" id="input_file">
  3. <div id="div_prevista"></div>
  4. // Ya se que a el input le falta name="" accept="" etcétera, pero es para que se den una idea básica del sistema.
  5.  

javascript y Jquery
Código
  1. $(window).load(function()
  2. {
  3.      $(function()
  4.      {
  5.            $('#input_file').change(function(e)
  6.    {
  7.   Add_Image(e);
  8.            });
  9.  
  10.            function Add_Image(e)
  11.            {
  12.       var file = e.target.files[0],
  13.     imageType = /image.*/;
  14.  
  15.         if(!file.type.match(imageType))
  16.       return;
  17.  
  18.              var reader = new FileReader();
  19.    reader.onload = fileOnload;
  20.    reader.readAsDataURL(file);
  21.             }
  22.  
  23.             function fileOnload(e)
  24.             {
  25.    var result = e.target.result;
  26.    var input_file = $('#input_file').val();
  27.  
  28.          if(input_file != '')
  29.            {
  30. $('#div_prevista').append('<img title="Cambiar imagen" style="width: 100%; height: 100%; border-radius: 5px; object-fit: cover;" src="'+result+'">');
  31.          }
  32.          }
  33.      });
  34. });
  35.  

Muchas gracias!


En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Subir imagen a base de datos
PHP
layker 2 2,900 Último mensaje 12 Mayo 2008, 06:31 am
por Syphroot
Subir imagen a un servidor apache « 1 2 »
Nivel Web
abraxxas 11 8,227 Último mensaje 6 Febrero 2010, 22:12 pm
por abraxxas
Subir imagen (como en wordpress)
PHP
dimitrix 3 3,018 Último mensaje 13 Abril 2011, 22:03 pm
por Nakp
Subir Imagen usando CodeIgniter!
Desarrollo Web
01munrra 0 6,638 Último mensaje 26 Junio 2012, 05:44 am
por 01munrra
Subir imagen con WebBrowser « 1 2 »
.NET (C#, VB.NET, ASP)
Darkwizz 14 6,419 Último mensaje 9 Junio 2017, 15:06 pm
por nomed
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines