javascript - 进度条无法正常工作

Question

我正在尝试使用 Javascript 创建用于将文件上传到 AWS 服务(lambda、S3)的进度条，前端正在使用 Materializecss 完成。但是，进度条移动得太快，在上传之前就到达了末尾，我可以看到使用innerHTML上传文件的百分比。所以，我确信它正在上传。下面是我尝试过的代码:

<style>
 #progressdisplay {
            width: 100%;
            background-color: #229954;
            border-radius: 4px;
            text-align: center;
            line-height: 12px;
            color: white;
        }

        #myBar {
            height: 12px;
            background-color: grey;
            border-radius: 4px;
        }
    </style>

<div class="row">
        <div class="file-field input-field col s12">
            <div class="btn blue">
                <span>Course File</span>
                <input id="crsfile" type="file">
            </div>
            <div class="file-path-wrapper">
                <input class="file-path validate" type="text" placeholder="Select the file">
            </div>
        </div>
    </div>

    <br/>
    <div class="container" id="progressbar">
        <div id="myBar">
            <div id="progressdisplay"></div>
        </div>
    </div>

    <br/>

    <div class="container center">
        <button class="btn waves-effect waves-light blue" type="submit" name="action" onclick="combinedfunctions()">Send
        <i class="material-icons right">send</i>
        </button>
    </div>

<script>
request.on('httpUploadProgress', function(progress) {
                var percentage = document.getElementById("progressdisplay");
                percentage.innerHTML = (progress.loaded * 100) / progress.total + "%";
                //console.log(progress.loaded + " of " + progress.total + " bytes"); 
                function move() {

                    var width = 10;
                    var id = setInterval(frame, 10);

                    function frame() {
                        if (width >= 100) {
                            clearInterval(id);
                        } else {
                            width++;
                            this.$$("progressdisplay").style.width = percentage + '%';
                            this.$$("progressdisplay").innerHTML = percentage * 1 + '%';
                        }
                    }
                }
            });
</script>

Answer 1

这段代码更有意义

request.on('httpUploadProgress', function(progress) {
    var element = document.getElementById("progressdisplay");
    var percentage = (progress.loaded * 100) / progress.total + "%";
    element.innerHTML = percentage;
    progressdisplay.style.width = percentage;
});