Tải lên FileIgniter AJAX File không hoạt động

Question

Tôi đã viết một cơ chế để tải lên một tệp bằng cách sử dụng công nghệ AJAX (javascript thuần túy) trong CodeIgniter.

Giải thích:

- Tôi đã viết một tập tin script.js đó là trách nhiệm để xử lý AJAX/Javascript quá trình tải lên.

- Tôi đã viết một bộ điều khiển trong CodeIgniter nhận yêu cầu từ AJAX để tải tệp lên.

- Tôi đã viết một trang HTML đơn giản

VẤN ĐỀ: Khi tôi nhấn nút upload, chỉ đơn giản là không có gì xảy ra! Không có lỗi nào được hiển thị. Tôi nghĩ rằng có một vấn đề với việc chuyển dữ liệu giữa javascript và php. Bởi vì tôi đã sử dụng một mã gần như tương tự trong trang php thông thường và đã thành công.

Dưới đây là file:

Đây là 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); 
}); 

Đây là PHP khiển trong 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);  
       } 


     } 

} 

Đây là 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

Trong script.js di chuyển:

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

outwith người nghe sự kiện tiến bộ:

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

Có một vấn đề trong mã của tôi đã ngăn cản việc thực hiện: Tôi đã sử dụng:

ajaxReq.upload. addEventListener`

Tôi phải bỏ qua quá trình tải lên:

ajaxReq.addEventListener