Как добавить имитацию загрузки?

421

24 ноября 2016, 10:01

Есть input с типом файл, как добавить в данный скрипт возможно имитации загрузки? Есть ли для этого готовое решение, или нужно искать какой-либо плагин?

    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>

Answer 1

С помощью javascript можно получать на сколько % загрузился файл, а на html сделать прогресс бар, и передавать туда значение

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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Почему $(this) не работает?

. ...

512

jQuery

Проверка на видимость блока в jquery

Добрый день! Есть наполовину рабочий код, не могу понять, где ошибка. .

427

jQuery

Как закрыть меню при клике вне него и при повторном клике на гамбургер?

При клике на кнопку открывается меню. При клике вне меню оно закрывается.

994

jQuery

JS выбор блока контента внешней ссылкой

На главной странице (stom-mva ru) одни пункты меню(ссылки) ведут на другие страницы, другие пункты - меняют на div'ы (основной "контент") с помощью этого...

411