add progress bar for upload file

Question

I have a form to submit file,my html code is here:

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

and I have axios code to upload,such as this code

  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'
        }
    })
}

I can get percent of upload in console,But I don't know How I can show this in progress bar,Can you help me?

Beatroot Beatroot · Accepted Answer · 2019-02-06T12:38:54

HTML5 has actually a well supported progress tag. eg:

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

so, all you need to do is something along those lines:

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

Browser-Support is good: https://caniuse.com/#feat=progress

add progress bar for upload file

1 Answers