I would like to display the progress returned by the server when uploading files in Ajax.

Asked 2 years ago, Updated 2 years ago, 101 views

We use jQuery and Ajax (server side is Python) to create asynchronous file uploaders.On the server side, the progress of the upload (e.g. progress such as Uploading hoge.jpg... and Updating database...) is output in JSON, but is it possible to receive it and display it every time Ajax outputs a new JSON status?

I think I can do something when all the server-side processing is over or XHR is not established (or successfully established), but I don't know if there is an event handler for new data output from the server.

Please let me know.

javascript python jquery ajax

2022-09-30 18:31

1 Answers

There are many ways to say file upload Ajax, so XHR answers as XMLHttpRequest().
Events include "progress", "load", "error", and "abort".

Depending on the server-side configuration, progress may not be notified during the transfer, and progress may be notified upon completion of the transfer.

var xhttppreq = new XMLHttpRequest();
xhttpreq.addEventListener("progress", function(e){
    var progress_data = e.loaded/e.total;
    console.log('progress:'+progress_data);
    }, false);
xhttpreq.addEventListener("load", function(e){}, false);
xhttpreq.addEventListener("error", function(e){}, false);
xhttpreq.addEventListener("abort", function(e){}, false);
xhttpreq.open("POST", "upload.php", true);
xhttpreq.send(form_data);

In $.ajax in jQuery (xhr only)

xhr:function(){
                    XHR = $.ajaxSettings.xhr();
                    XHR.upload.addEventListener('progress',
                                function(e){
                                    vardata=e.loaded/e.total;
                                }, false);
                    return XHR;
                }


2022-09-30 18:31

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.