javascript: determining percent of loading of a file

Question

i see some javascript/jQuery project that add a progress bar to webpage, for displaying body elements loading percentage, but i want to display loading bar of one big file.

is it possible for javascript to detect how much percent of a file is loaded?

note: i can't split the file to multiple pieces!

score 0 · Answer 1 · answered May 28 '14 at 04:33

I use ajax and the uploadProgress event to show progress of a file being uploaded. There is a lot of different things in this script but most of it is usable (I am also using this in MVC).

The other end that receives the file is a typical file posting location for receiving the file.

PostFileForm = the<form>

        //Call ajax submit
        var Submit = PostFileForm.ajaxForm({
            type: PostFileForm.attr("method"),
            url: PostFileForm.attr("action"),
            data: PostFileForm.serialize(),
            dataType: "json",
            traditional: true,
            success: function (data, status, XHR) {
                //$(".text-success").empty();
                //$(".text-success").html(data.imageUrl);

                //TODO: Replace the placeholders with the URL to the image in the cloud
                document.getElementById('img440_266').src = data.message;
                document.getElementById('img306_185').src = data.message;
                document.getElementById('img210_127').src = data.message;
                document.getElementById('img81_49').src = data.message;
            },
            error: function (XHR, status, error) {
                divStatus.html(error);
                divStatus.class = "text-danger";
                divStatus.animate({
                    backgroundColor: "#fcff04",
                    width: 500
                }, 1000);
                divStatus.delay(1000);
                divStatus.animate({
                    backgroundColor: "#fff",
                    width: 500
                }, 1000);
            },
            beforeSend: function () {
                divStatus.empty();
                var percentVal = '0%';
                bar.width(percentVal)
                bar.attr('aria-valuenow', '0');
                bar.html(percentVal);
            },
            uploadProgress: function (event, position, total, percentComplete) {
                $('.progress').show();
                var percentVal = percentComplete + '%';
                bar.width(percentVal)
                bar.attr('aria-valuenow', percentComplete);
                bar.html(percentVal);
            },
            complete: function (xhr) {
                divStatus.html(xhr.responseText); //change and show image
                divStatus.class = "text-success";
                divStatus.animate({
                    backgroundColor: "#fcff04",
                    width: 500
                }, 1000);
                divStatus.delay(1000);
                divStatus.animate({
                    backgroundColor: "#fff",
                    width: 500
                }, 1000);

                //reset progressbar and fade it out
                setTimeout(function () {
                    $('.progress').attr("class", "progress").fadeOut().attr("class", "progress progress-striped active");
                }, 3000);
            }
        });

javascript: determining percent of loading of a file

1 Answers1