Ajax file uploads using jQuery and CodeIgniter

Good day!

For a long time on the Internet, I was looking for information on the implementation of AJAX file downloads for CodeIgniter. Different developers offered different technologies and examples of implementation. I tried them all, but none of them was simple enough and functional at the same time. Only recently I discovered the jQuery File Uploader . "He is no different from the rest" - you say, but it is not. Its main difference is simplicity and good documentation with examples. All callbacks are parsed in the documentation, all options are described. Implementation in any system does not take much time.

Today I will show how it is very easy to organize multipart uploading files to the + drug & drop server in CodeIgniter.

')

jQuery File Uploader + CodeIgniter

Out of the box, CodeIgniter suggests that we use the library $ this-> load-> library ('upload'); , which allows you to control the transferred files, limiting the download by type, size, width and height of the image. Using it is easy and convenient, but it should be noted a small limitation imposed on INPUT by this library. The INPUT field must necessarily have the name = "userfile" parameter. We agree with this fact and go to the Controller to the function that will call the Upload library and, in fact, save our files to disk.

An example implementation of PHP functions:

public function upload(){ $config['upload_path'] = "/application/uploads/"; $config['allowed_types'] = "jpg|jpeg|png|gif|flv|mp4|wmv|doc|docx|xsl|xslx|ppt|pptx|zip|rar|tar"; $config['max_size'] = 2048; $config['max_width'] = 800; $config['max_height'] = 600; $config['encrypt_name'] = TRUE; $this->load->library('upload', $config); if ($this->upload->do_upload() == false) { $error = array('error' => $this->upload->display_errors()); echo json_encode($error); }else{ $data = $this->upload->data(); echo json_encode($data); } } 

Attention! In order for all allowed_types to work, you need to add the missing MIME-Types to the configuration file /application/config/mimes.php

We have a function ready to save the file to the server. Go to the client side. We will need to download jQuery File Upload from Github. The plugin provides great opportunities, but we will not use them all, we will use only the download of several files, drug & drop and progressall.

Connect to the download page necessary JS:

  - jquery.fileupload.js - jquery.fileupload-video.js - jquery.fileupload-process.js - jquery.iframe-transport.js - upload.js //    -   

And CSS file:

  - css/jquery.fileupload.css 

Add our INPUT to the page:

 <?php echo form_open_multipart('/admin/upload', array('id' => 'fileupload')); ?> <span class="fileinput-button"> <span> </span> <input type="file" name="userfile" multiple> </span> <?php echo form_close(); ?> 

It remains not much at all - to write upload.js, which will listen for the event of changing the INPUT field and trigger the download of the selected file. “And where is the promised Drug & Drop?” You ask. Drug & Drop is already working thanks to jQuery File Upload. Instead of calling the standard file selection dialog, you can drag and drop several files onto the page at once and they will be uploaded to the server in the order of the queue.

And lastly Upload.js

 $(document).ready(function(){ $('#fileupload').fileupload({ dataType: 'json', progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $('.progress .bar').css('width', progress + '%'); }, done: function (e, data) { if(data.result.error != undefined){ $('#error').html(data.result.error); //          $('#error').fadeIn('slow'); }else{ $('#error').hide(); //        $('#files').append("<img class='img-polaroid' style='margin-left:15%;padding:10px;width:auto;height:250px' src=''>"); $('#success').fadeIn('slow'); } } } }); }); 

data is our response from the server, but it is not an array with information about the uploaded file. All information in JSON format is stored in Data.Result. By the way, console.log (data) will help you find a lot of interesting things, such as: the number of sent files, errors and much more.

That's all, I hope for the usefulness of the material.