Question

我看到一些javascript / jQuery项目向网页添加进度条，用于显示body元素加载百分比，但我想显示一个大文件的加载栏。

javascript可以检测文件的加载百分比吗？

note ：我无法将文件拆分成多个部分！

Answer 1

我使用ajax和uploadProgress事件来显示正在上传的文件的进度。这个脚本中有很多不同的东西，但大部分都是可用的（我也在MVC中使用它。）

接收文件的另一端是用于接收文件的典型文件发布位置。

PostFileForm = <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：确定文件加载百分比

1 个答案: