

jQueryとAjax(サーバーサイドはPython)を使って非同期のファイルアップローダを制作しています。サーバーサイドではアップロードの途中経過(Uploading
hoge.jpg....やUpdating
database....などといった進捗状況)をJSONで出力しているのですが、Ajaxで新しいJSONステータスが出力されるたびにそれを受け取って表示するということはできるのでしょうか?

サーバーサイドでの処理が全て終了した時や、XHRが確立できなかった時(または確立に成功した時)に何らかの処理をすることはできそうなのですが、サーバーから新しいデータが出力されたとき用のイベントハンドラがあるのかなども見当がつきません。

ご教示よろしくお願いいたします。


CC BY-SA 3.0
2017-05-01T15:48:55.373
34407
2017-12-01T03:16:51.957
22465
question
javascript python jquery ajax
Ajaxでファイルアップロードする際にサーバーから返される進捗を逐一表示したい


file upload Ajaxと言っても方法は色々あるので、XHRは XMLHttpRequest()として答えます。  
イベントは "progress","load", "error","abort" があります。

サーバ側の設定によっては、転送中は進捗が通知されず 転送完了と同時に進捗も通知される場合があります。

[code]

    var xhttpreq = 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);
    
[/code]

jQueryの $.ajax では（xhrの所だけ）

[code]

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


CC BY-SA 3.0
2017-05-02T03:45:01.207
34412
2017-05-02T04:39:05.200
2017-05-02T04:39:05.200
22793
22793
34407
answer