¡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

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

javascript y Jquery

$(window).load(function()
{
      $(function()
      {
            $('#input_file').change(function(e) 
	    {
		   Add_Image(e);
            });
 
            function Add_Image(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;
		    var input_file = $('#input_file').val();
 
      		    if(input_file != '')
	            {
			 $('#div_prevista').append('<img title="Cambiar imagen" style="width: 100%; height: 100%; border-radius: 5px; object-fit: cover;" src="'+result+'">');
      		    }
     	      }
      });
});
 

Muchas gracias!