I'm trying to make a file upload with a progress bar, using CI 2.1.3. I've got the file upload all working correctly, but getting this file progress thing has not been easy. I've looked at a ton of guides all with different solutions, but none of them seem to work because most are quite dated (2008-ish).
Here's what I'm looking for:
- PHP/jQuery/AJAX/Javascript solution (no Flash, please!)
- Cross-Browser (IE isn't an issue, so if it doesn't work in IE8 or lower that's fine)
- CodeIgniter Upload Library-compatible
That's about it. My code for reference:
PHP:
public function do_upload() { // Configure and load the uploads library $config['upload_path'] = './uploads/'; $config['allowed_types'] = 'mp4|mov'; $config['encrypt_name'] = TRUE; $config['max_size'] = '2621440'; // 2.5 GB, in kilobytes $this->load->library('upload', $config); if (!$this->upload->do_upload('userfile')) { $this->session->set_flashdata('error', $this->upload->display_errors('', '')); redirect('upload'); } else { $this->session->set_flashdata('upload_data', $this->upload->data()); $upload_data = $this->upload->data(); $uploader = $this->flexi_auth->get_user_by_id()->row_array()['uacc_username']; $this->load->model('upload_model'); $this->session->set_flashdata('uaid', $this->upload_model->generate_uaid($upload_data['raw_name'])); $this->upload_model->create_upload($upload_data['file_name'], $upload_data['raw_name'], $upload_data['client_name'], $upload_data['file_size'], $upload_data['file_path'], $uploader); redirect('upload'); } } HTML:
<div class="progress progress-striped active" id="upload_progress" style="display: none;"> <div class="bar" id="upload_progress_bar" style="width: 0%;"></div> </div> <?php echo form_open_multipart('upload/do_upload', array('id' => 'upload_form')); ?> <input type="file" name="userfile" size="20" /> <button type="submit" name="upload">Upload</button> <?php echo form_close(); ?> 
