Codeigniter + Progressbar

Question

Hello. I’m trying to develop a file upload system which when doing the post generates and loads a progressbar according to the course of my file unzip script, read and store in the bank. It’s the first time I’m messing with progressbar and ajax. I’m using the framework codeigniter. Below follows my controller Function code and . js.

 public function index() {
    if ($this->input->post()) {
        $cpt = count($_FILES['file']['name']);
        $files = $_FILES;
        for ($i = 0; $i < $cpt; $i++) {
            $_FILES['file']['name'] = $files['file']['name'][$i];
            $_FILES['file']['type'] = $files['file']['type'][$i];
            $_FILES['file']['tmp_name'] = $files['file']['tmp_name'][$i];
            $_FILES['file']['error'] = $files['file']['error'][$i];
            $_FILES['file']['size'] = $files['file']['size'][$i];
            $targetPath = getcwd() . '/uploads/';
            $targetFile = $targetPath . $_FILES['file']['name'];
            move_uploaded_file($_FILES['file']['tmp_name'], $targetFile);
            $FileXML = $this->extrair($targetFile);
            //$this->readXml($FileXML);
        }
    }

My view:

<form id="uploadform" action="Curriculo" method="POST" enctype="multipart/form-data">
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-info" id="progressbar" style="width:0%">
    </div>                                        
</div>
<div class="form-group">
    <input type="file" multiple="multiple" id="file" name="file[]" multiple data-preview-file-type="any" data-upload-url="#">
</div> 
<div class="panel-footer">
    <button type="submit" class="btn btn-success " id="submit" name="submit">CADASTRAR</button> 
</div>

My script.js

$(function () {
var inputFile = $('input:file');
var uploadURI = $('#uploadform').attr('action');
var progressBar = $('#progressbar');
var data = new formData();

$('#submit').on('click', function (event) {
    var FilesToUpload = inputFile[0].files;
    if (FilesToUpload.length > 0) {
        for (var i = 0; i < FilesToUpload.length; i++) {
            console.log('oi');
            var file = FilesToUpload[i];
            data.append("file[]", file, file.name);
        }

        $.ajax({
            url: uploadURI,
            type: 'post',
            data: data,
            processData: false,
            contentType: false,
            success: function () {
            },
            xhr: function () {
                var xhr = new XMLHttpRequest();
                xhr.upload.addEventListener(".progress-bar", function (event) {
                    if (event.lengthComputable) {
                        var percentComplete = Math.round((event.loaded / event.total) * 100);
                        console.log(percentComplete);

                        $('.progress-bar').show();
                        progressBar.css({width: percentComplete + "%"});
                    }
                    ;
                }, false);

                return xhr;
            }
        });
    }
});

});

The mistake is that the formData of script js. not defined. However, I have tried to pass the form and field as parameters, leave null and also put direct the .append and continues with the error.