Załadowanie pliku AJAX CodeIgniter nie działa

Question

Napisałem mechanizm do przesłania pliku przy użyciu technologii AJAX (czysty javascript) w CodeIgniter.

Objaśnienie:

- Pisałem plik script.js który jest odpowiedzialny do obsługi AJAX/JavaScript proces przesyłania.

- Napisałem sterownik w CodeIgniter, który odbiera żądanie od AJAX, aby załadować plik.

- Napisałem prosty HTML strony

PROBLEM: Kiedy naciśnij przycisk wysyłania, po prostu nic się nie dzieje! Brak błędu. Myślę, że jest problem z przesyłaniem danych między javascript i php. Ponieważ użyłem prawie podobnego kodu na zwykłej stronie php i odniosłem sukces.

Oto pliki:

To jest obsługa 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); 
}); 

Jest PHP Controller w CodeIgniter

<?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);  
       } 


     } 

} 

To HTML

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Upload Form With Ajax</title> 
<script src="<?php echo base_url(); ?>js/script.js" type='text/javascript'></script> 
</head> 

<body> 
<div id='error' style='color: red;height: 40px; width: 200px;'> 
<?php 
if(!empty($error)){echo $error; } 
?> 
</div> 
<form id='form' name='form' enctype="multipart/form-data" > 
<input type='file' name='file' id='file'/> 
<input type='submit' name='submit' id='submit' value='Upload File' /> 
</form> 
<div style='height: 200px; width: 300px; color: red; padding: 10px; background-color: #CCC;' id='progressBar'></div> 
</body> 
</html> 

Answer 1

W script.js ruch:

// 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); 

poza obszarem detektora zdarzeń progress:

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); 

Answer 2

Było kolejny problem w moim kodzie uniemożliwił wykonanie: Kiedyś:

ajaxReq.upload. addEventListener`

Musiałem pominąć załadowanie:

ajaxReq.addEventListener