добавить индикатор для загрузки файла

Question

У меня есть форма для отправки файла, мой HTML-код здесь:

    <input type="file" name="file" id="file">
    <button onclick="upload()">upload</button>

и у меня есть код для загрузки аксиоса, например, этот код

  function upload() {
    var file = $('#file').prop('files')[0];
    var formdata = new FormData;
    formdata.append('file',file);
    const config = {
        onUploadProgress: function(progressEvent) {
            var percentCompleted = Math.round( (progressEvent.loaded * 100) 
             / progressEvent.total );
            console.log(percentCompleted)
        }
    };
    axios.post("/upload/test", formdata,  config,{
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    })
}

Я могу получитьпроцент загрузки в консоль, но я не знаю, как я могу показать это в строке состояния, вы можете мне помочь?

Answer 1

HTML5 имеет хорошо поддерживаемый тег прогресса.Например:

<progress max="100" value="80"></progress>

Итак, все, что вам нужно сделать, это что-то вроде этого:

onUploadProgress: function(progressEvent) {
    var percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
    $('progress').attr('value', percentCompleted);
    console.log(percentCompleted)
}

Поддержка браузера хороша: https://caniuse.com/#feat=progress