Javascript 用于文件上载进度的ajax侦听器

我找不到绕过代码的方法。我看过一些教程，但由于我设计代码的方式，我想我需要一些不同的东西

 (function(){
    var dropzone = document.getElementById('dropzone');

    var uploadFile = function (files) {
        var formData = new FormData();
        var request = new XMLHttpRequest();
        var i;

        var file_size = 0;
        for(i = 0; i<files.length; i = i+1){
            formData.append('file[]', files[i]);
            file_size = file_size + files[i].size;
        }
        request.onload = function(){
            var data = this.responseText;
           // window.location.reload();
        };
        request.open('post', 'dragNdrop.php?isNotSet=set');
        request.send(formData);
    };

    dropzone.ondragover = function(){
        this.className = 'dropzone dragover';
        return false;
    };

    dropzone.ondragleave = function(){
        this.className = 'dropzone';
        return false;
    };

    dropzone.ondrop = function (event) {
        event.preventDefault();
        this.className = 'dropzone';
        uploadFile(event.dataTransfer.files);
        return false;
    }
}());

我试过这样的方法：

request.upload.addEventListener("progress", progressBar, false);

 function progressBar(event){
     var percent = (event.loaded / event.total) * 100;
     console.log(percent + " " + event.loaded + " " + event.total);
 }

它只返回一次值，我想它需要返回几次，因为它需要循环才能使进度条移动

下面的所有函数都在主函数中

---

我还能怎么做呢？

。使用jquery的我想要纯Javascript它在

jquery

中使用

普通Javascript

。你可以用它。请看

XHR

示例。好的，谢谢您的帮助

request.upload.addEventListener("progress", progressBar, false);

 function progressBar(event){
     var percent = (event.loaded / event.total) * 100;
     console.log(percent + " " + event.loaded + " " + event.total);
 }