Multiple file upload in CodeIgniter
In this tutorial I will show you how to upload multiple image in your Codeigniter project. In Codeigniter many developer want to upload multiple file with their own project work. You can do it with your own preferences and set various restricting of the file type and file size.
Upload System:
A user can select multiple image file and upload file click the upload button. An upload form is allowing a user, who is select multiple file and upload into the database or directory. Now the upload files are uploaded into the destination, which you specify. After file uploading success it will show a success message.
• Create a form and create file input field and display
• jQuery Ajax
• Use Controller
• Follow the source code
First you need create a form in the form page and add a file input field and display it in your server. That’s like create a multiple_file_upload.php and edit it in a text editor and save this file in the application/view folder. For example —
Form Page:
<!DOCTYPE html> <html> <head> <title>multiple file upload</title> </head> <body> <form> <input type="file" name="fileupload[]" id="fileupload"> </form> </body> </html>
Use jQuery Ajax for append the all image file and pass file value in the controller page. set a URL and set type POST. I will give you in the below of file upload score code and example using JQuery Ajax. Try it
You need to set the form helper in you controller page for show the form and work in form. Use $this->load->helper(‘form’); code, if you are not using this code so use this code.
JQuery Ajax
In jQuery first append the file value using formData.append(‘file[]’, portfolio_values); and then pass value in the another page, which you set in action or URL. Follow the example:
<script type="text/javascript"> $("#fileupload").on("change",function(e){ var action = "<?php echo base_url('Information/multiple_file_upload')?>"; var ins = document.getElementById('fileupload').files.length; var formData = new FormData(); for(var i=0; i< ins; i++) { var portfolio_values = document.getElementById('fileupload').files[i]; formData.append('file[]', portfolio_values); } $.ajax({ type:"post", url: action, data:formData, dataType:"json", processData: false, // tell jQuery not to process the data contentType: false, // tell jQuery not to set contentType success: function(result){ console.log(result); }, }); }); </script>
When you using scripting language then you must be set jquery.min.js file of link. If you want to set bootstrap.min.css and bootstrap.min.js link, that link I show in the below, follow it.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Controller:
Now go to the controller page and create call the function name, which you have defined in the Ajax. So follow the code
public function multiple_file_upload(){ //$data = array(); $this->load->library('upload'); $number_of_files_uploaded = count($_FILES['file']['name']); $config = array( 'allowed_types' => 'pdf|doc|docx|xls|xlsx', 'max_size' => 3000, 'overwrite' => FALSE, 'upload_path' => './public/storage/' ); for ($i = 0; $i < $number_of_files_uploaded; $i++) : $_FILES['f']['name'] = $_FILES['file']['name'][$i]; $_FILES['f']['type'] = $_FILES['file']['type'][$i]; $_FILES['f']['tmp_name'] = $_FILES['file']['tmp_name'][$i]; $_FILES['f']['error'] = $_FILES['file']['error'][$i]; $_FILES['f']['size'] = $_FILES['file']['size'][$i]; $config['file_name'] = $_FILES['file']['name'][$i]; $this->upload->initialize($config); if($this->upload->do_upload('f')) : $data['error_code'] = 0; $data['msg'] = "uploaded"; $final_files_data[] = $this->upload->data(); else : $data['error_code'] = 1; $data['msg'] = "invalid file type"; $data['status'] = $this->upload->display_errors(); $data['status']->success = FALSE; endif; endfor; print_r($data['status']); //echo json_encode($data); }
Thanks for visiting our Blog Site. Web have many Codeigniter tutorial, if you want to see more codeigniter Tutorial the follow this link and see the latest codeigniter tutorial. Thanks!