2

Есть 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>

1 ответ 1

2

С помощью 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>

2
  • А где в вашем коде вы получаете процент загрузки файла?
    – stackanon
    10 ноя 2016 в 3:39
  • @stackanon, я привел пример прогресс бара, процент загрузки я не получаю. вопрос был о имитации загрузки
    – Abmin
    10 ноя 2016 в 3:48

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.