Progressbar for file uploads in chrome

I have a webpage which tracks the progress of a file upload. This is the html source:

<form>
    <input type="hidden" id="id" name="开发者_C百科UPLOAD_IDENTIFIER" value="4dc6f7819200e">
    <input type="file" name="image">
    <input type="submit" value="Upload file">
</form>
<div id="progress"></div>
<iframe id="upload-frame" name="upload-frame"></iframe>

And this is my javascript (I use jQuery):

var pbar = $("#progress");
var started = false;

$(function() {
    $("form").submit(function() {
        pbar.show().progressbar();

        $("#upload-frame").load(function() {
            started = true;
        }

        setTimeout(function() {
            updateProgress($("#id").val());
        }, 500);
    });
});

function updateProgress(id) {
    $.get("my/url/here?id=" + id, function(progress) {
        if (null === progress) {
            updateProgress(id);
        }

        if (progress<100 || !started) {
            started = progress < 100;
            updateProgress(id);
        }

        started && pbar.progressbar('value', progress);
    }
};

I leave the server side code out, because this is the strange thing: Firefox and IE work normally. Only the webkit browsers (Chrome, Chromium, Safari) show the start of the progressbar, but do not update them. Why is that? Any thoughts?