javascript - 用于文件上传进度的 ajax 监听器

Question

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

 (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 = function(){console.log("me")} //Returns nothing

我试过这样的事情：

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

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

它只返回一次值，我想它需要返回多次，因为它需要循环以使进度条移动？

下面的所有这些函数都在 main 函数中。

我还能怎么做？

标签： javascript