There is input with a file type, how can imitations of loading be added to this script? Is there a ready-made solution for this, or do you need to look for a plugin?

function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#blah').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#imgInp").change(function(){ readURL(this); }); 
  <form id="form1" runat="server"> <input type='file' id="imgInp" /> <img id="blah" src="#" alt="your image" /> </form>

    1 answer 1

    Using javascript, you can get how much% the file has loaded, and make a progress bar on the html, and transfer the value there

     function move() { var elem = document.getElementById("myBar"); var width = 1; var id = setInterval(frame, 10); function frame() { if (width >= 100) { clearInterval(id); } else { width++; elem.style.width = width + '%'; } } } 
     #myProgress { position: relative; width: 100%; height: 30px; background-color: #ddd; } #myBar { position: absolute; width: 1%; height: 100%; background-color: #4CAF50; } 
     <div id="myProgress"> <div id="myBar"></div> </div> <br> <button onclick="move()">Нажми</button>

    • And where in your code do you get the percentage of file download? - stackanon
    • @stackanon, I gave an example of the progress of the bar, the percentage of loading I do not get. question was about imitation downloads - Abmin