Javascript CodeIgniter AJAX文件上载不工作

我在CodeIgniter中编写了一种使用AJAX技术（纯javascript）上传文件的机制

说明：

1-我编写了一个script.js文件，负责处理上传的AJAX/Javascript过程

2-我在CodeIgniter中编写了一个控制器，它接收来自AJAX的上传文件的请求

3-我写了一个简单的HTML页面

问题：当我点击上传按钮时，什么也没发生！没有显示错误。我认为javascript和php之间的数据传输存在问题。因为我在常规php页面中使用了几乎类似的代码，并且已经成功了

以下是文件：

这是JAVASCRIPT

// JavaScript Document
var doUpload =  function(event){
        // globally used variables in this function
        var progressBar = document.getElementById('progressBar');

        event.preventDefault(); // prevents the default action of an element
        event.stopPropagation();        
        // get the file-input id
        var fileId = document.getElementById('file');    

        // this variable makes an object which accept key/value pairs which could be sent via ajax.send
        var formObj = new FormData();

        // append currently selected file to the dataObject            
        formObj.append('file', fileId.files[0]);        


        // this is a variable to check in the php script (controller if the codeIgniter is used)
        formObj.append('error-check', true);
        formObj.append('finish-check', true);

        // let's make the ajax request object
        var ajaxReq = new XMLHttpRequest();

        // PROGRESS  OF THE FILE /////////////////////////////////////////////
            // now trigger a function during the progress-process of the file-upload process

        ajaxReq.upload.addEventListener('progress', function(event){        

                console.log('this is a very good.');        

                // first let's get the amount of the file loaded. it is in decimals
                var percent = event.loaded / event.total;
                // get the name of the element that the progress-indicator is outputted there

                if(event.lengthComputable) // if a file is inserted and everything is just OK for uploading
                {
                    if(progressBar.hasChildNodes()) // cleans the div container for a new progress to display
                    {
                        progressBar.removeChild(progressBar.firsChild);
                    }
                    progressBar.appendChild(document.createTextNode('The Progress So Far: '+percent*100+' %'));
                }
        // END OF PROGRESS  OF THE FILE /////////////////////////////////////////////



        // LOAD  OF THE FILE /////////////////////////////////////////////
            ajaxReq.upload.addEventListener('load', function(event){
                progressBar.appendChild(document.createTextNode(" Completed!"));
            });
        // END OF LOAD  OF THE FILE /////////////////////////////////////////////

        // ERROR  OF THE FILE /////////////////////////////////////////////
            ajaxReq.upload.addEventListener('error', function(event){
                progressBar.removeChild();
                progressBar.appendChild(document.createTextNode("Failed to Upload the File."));
            });    
        // END OF THE ERROR  OF THE FILE /////////////////////////////////////////////

        // JSON            

        // OPEN THE AJAX REQUEST
        ajaxReq.open('POST', 'upload/uploader');

        // Set the header of the POST request
        ajaxReq.setRequestHeader('Cache-Control', 'no-cache');

        // send the file. remember, we shoud pass a formData object as an argument to the ajaxRequest.send();
        ajaxReq.send(formObj);

        });

}

window.addEventListener('load', function(event)
{    
        // get the submit id of the form
        var submitButton = document.getElementById('submit');
        submitButton.addEventListener('click', doUpload);
});

这是CodeIgniter中的PHP控制器

<?php
class Upload extends CI_Controller
{
         function index()
        {
            $this->load->view('pages/form');
         }
         function uploader ()
         {
                // define the required settings for the upload library to instanciate
                $config['upload_path'] = './uploads/';
                $config['allowed_types'] = 'gif|jpg|png|doc|txt';
                $config['max_size']  = 1024 * 8;
                $config['encrypt_name'] = TRUE;


                // load the upload library
                $this->load->library('upload', $config);


                if(!$this->upload->do_upload('file'))
                {
                    $data['error'] = $this->upload->display_errors();
                    //$this->load->view('pages/form', $data);
                    json_encode($data['error']);
                }
                else
                {
                    $data['uploaded'] = $this->upload->data();
                    //$this->load->view('pages/form', $data);    
                }


         }

}

---

在script.js中移动：

// OPEN THE AJAX REQUEST
ajaxReq.open('POST', 'upload/uploader');
// Set the header of the POST request
ajaxReq.setRequestHeader('Cache-Control', 'no-cache')
// send the file. remember, we shoud pass a formData object as an argument to the xhruest.send();
ajaxReq.send(formObj);

使用进度事件侦听器：

    ajaxReq.upload.addEventListener('progress', function(event)
    {        
        console.log('this is a very good.');        
        // first let's get the amount of the file loaded. it is in decimals
        var percent = event.loaded / event.total;
        // get the name of the element that the progress-indicator is outputted there
        if(event.lengthComputable) // if a file is inserted and everything is just OK for uploading
        {
            if(progressBar.hasChildNodes()) // cleans the div container for a new progress to display
            {
                progressBar.removeChild(progressBar.firsChild);
            }
            progressBar.appendChild(document.createTextNode('The Progress So Far: '+percent*100+' %'));
        }
        // END OF PROGRESS  OF THE FILE /////////////////////////////////////////////


        // LOAD  OF THE FILE /////////////////////////////////////////////
        ajaxReq.upload.addEventListener('load', function(event)
        {
            progressBar.appendChild(document.createTextNode(" Completed!"));
        });
        // END OF LOAD  OF THE FILE /////////////////////////////////////////////
        // ERROR  OF THE FILE /////////////////////////////////////////////
        ajaxReq.upload.addEventListener('error', function(event)
        {
            progressBar.removeChild();
            progressBar.appendChild(document.createTextNode("Failed to Upload the File."));
        });    
        // END OF THE ERROR  OF THE FILE /////////////////////////////////////////////
        // JSON            
    });
    // OPEN THE AJAX REQUEST
    ajaxReq.open('POST', 'upload/uploader');
    // Set the header of the POST request
    ajaxReq.setRequestHeader('Cache-Control', 'no-cache')
    // send the file. remember, we shoud pass a formData object as an argument to the ajaxRequest.send();
    ajaxReq.send(formObj);

---

我的代码中还有一个问题阻止了执行：我使用：

ajaxReq.upload.addEventListener`

我不得不省略上传：

ajaxReq.addEventListener

---

你的回答非常好。但是，我已经将您建议的部分移到了progress事件侦听器之前的行中。而且它有效！

ajaxReq.addEventListener