XHR und mehrere Progressbars

[pl]

Eine Closure drumherumbauen und das Zeug dort ablegen.

Nicht drumherum sondern innendrinnen in der Funktion xhr.upload.onprogress = ... brauche ich die id von ganz oben:

function upload(id){
    // vor dem Upload wird das Bild scaliert
    var height = $('#'+id+'height').text();
    var width = $('#'+id+'width').text();
    var img = new Image();
    var bloburl = URL.createObjectURL(FILES[id]);
    img.src = bloburl;
    img.id = id;
    img.width = width;
    img.height = height;
    img.onload = function(e){
            var canvas = document.createElement('canvas');
            canvas.id = e.target.id;
            var ctx = canvas.getContext("2d");
            canvas.width  = e.target.width;
            canvas.height = e.target.height;
            canvas.id = e.target.id;
            ctx.drawImage(e.target, 0, 0, width, height);
            canvas.toBlob(function(blob) {
                if( document.getElementById(canvas.id+'saveas').checked == true ){
                    saveAs(blob, $('#'+canvas.id+'name').text());
                    return;
                }
                $('#'+canvas.id+'state').text('Pending');
                var param = {
                    upload: [1],
                    name: [$('#'+id+'name').text()],
                    descr: [$('#'+id+'descr').text()]
                }
                var xhr = new XMLHttpRequest();
                xhr.open('PUT','%URL%?'+query4request(param));
                xhr.upload.id = canvas.id;
                xhr.id = canvas.id;
                xhr.setRequestHeader('Content-Type','application/body+query');
                xhr.upload.onprogress = function(e) {
                    if (e.lengthComputable) {
                        document.getElementById(e.target.id+'progress').value = (e.loaded / e.total) * 100;
                    }
                };
                xhr.onload = function(e){
                    if(e.target.status != 200){
                        var name = $('#'+id+'name').text();
                        return errmsg(xr("Problem mit Datei '@datei@', Fehler: @msg@", {msg:e.target.response,datei:name}));
                    }
                    $('#'+e.target.id+'state').text('Done');
                    fixname(e.target.id, 'state');
                };
                xhr.send(blob);
            },'image/jpeg', 0.6);

    };
}

Jedesmal wenn upload(id) aufgerufen wird, kann die id eine andere sein. Falls der Aufruf in einer Schleife erfolgt, ist id mit Sicherheit eine Andere als die id deren Upload-Prozess noch läuft. Deswegen reicht mein Code die id über Objekteigenschaften durch bis zum jeweiligen EventHandler.