Profile Image Upload Codeigniter Ajax Jquery Github
CodeIgniter File Upload
File direction is essential to most web applications. If you are developing a content management system, and so y'all will need to be able to upload images, word documents, pdf reports, etc. If yous are working on a membership site, you may need to take a provision for people to upload their profile images. CodeIgniter's File Uploading class makes it like shooting fish in a barrel for us to do all of the above.
In this tutorial, we volition look at how to use the file upload library to load files.
Uploading Images in CodeIgniter
File uploading in CodeIgniter has ii main parts. The frontend and the backend. The frontend is handled by the HTML form that uses the class input type file. On the backend, the file upload library processes the submitted input from the class and writes it to the upload directory.
Allow's begin with the input form.
Create a new directory called files in application/views directory
Add the following files in application/views/files
- upload_form.php – this view contains the HTML form that has the input type of file and submits the selected file to the server for processing
- upload_result.php – this view displays the results of the uploaded prototype including a link that we can click to view the results.
Add the post-obit lawmaking to upload_form.php
<!DOCTYPE html> <html> <head> <title>CodeIgniter Paradigm Upload</title> <meta charset="UTF-viii"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div> <h3>Select an image from your figurer and upload it to the cloud</h3> <?php if (isset($fault)){ echo $mistake; } ?> <form method="postal service" action="<?=base_url('store-image')?>" enctype="multipart/form-data"> <input type="file" id="profile_image" name="profile_image" size="33" /> <input type="submit" value="Upload Paradigm" /> </form> </div> </body> </html> Hither,
- if (isset($mistake)){…} checks if the error variable has been set. If the result is true then the error returned past the upload library is displayed to the user.
- <input blazon="file" id="profile_image" name="profile_image" size="33″ /> the type file allows the user to browser to their estimator and select a file for uploading.
Ad the following code to upload_result.php
<!DOCTYPE html> <html> <head> <title>Image Upload Results</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=ane.0"> </head> <body> <div> <h3>Congratulations, the image has successfully been uploaded</h3> <p>Click here to view the image you simply uploaded <?=anchor('images/'.$image_metadata['file_name'], 'View My Image!')?> </p> <p> <?php echo anchor('upload-prototype', 'Go back to Prototype Upload'); ?> </p> </div> </torso> </html> Hither,
- <?=anchor('images/'.$image_metadata['file_name'], 'View My Epitome!')?> uses the ballast helper to create a link to the new uploaded file in the images directory. The name is retrieved from the prototype metadata that is passed to the view when the file has successfully been uploaded.
Permit's now create the controller that volition respond to our image uploading
Add a new file ImageUploadController.php in application/controllers
Add the following code to ImageUploadController.php
<?php defined('BASEPATH') OR go out('No straight script admission allowed'); grade ImageUploadController extends CI_Controller { public function __construct() { parent::__construct(); $this->load->helper('url', 'form'); } public function alphabetize() { $this->load->view('files/upload_form'); } public function store() { $config['upload_path'] = './images/'; $config['allowed_types'] = 'gif|jpg|png'; $config['max_size'] = 2000; $config['max_width'] = 1500; $config['max_height'] = 1500; $this->load->library('upload', $config); if (!$this->upload->do_upload('profile_image')) { $error = array('fault' => $this->upload->display_errors()); $this->load->view('files/upload_form', $error); } else { $data = array('image_metadata' => $this->upload->data()); $this->load->view('files/upload_result', $data); } } } Here,
- class ImageUploadController extends CI_Controller {…} defines our controller grade and extends the base controller CI_Controller
- public function __construct() {…} initializes the parent constructor method and loads the url and form helpers
- public function alphabetize() {…} defines the alphabetize method that is used to display the image upload course
- public function store() {…} defines the method that will upload the epitome and shop it on the web application server.
- $config['upload_path'] = './images/'; sets the directory where the images should be uploaded
- $config['allowed_types'] = 'gif|jpg|png'; defines the acceptable file extensions. This is important for security reasons. The immune types ensures that just images are uploaded and other file types such as php cant exist uploaded because they have the potential to compromise the server.
- $config['max_size'] = 2000; gear up the maximum file size in kilobytes. In our example, the maximum file that can exist uploaded is 2,000kb close to 2MB. If the user tries to upload a file larger than 2,000kb, then the image volition fail to upload and the library volition return an error message.
- $config['max_width'] = 1500; sets the maximum width of the epitome which in our example is i,500 px. Any width larger than that results in an error
- $config['max_height'] = 1500; defines the maximum acceptable height.
- $this->load->library('upload', $config); loads the upload library and initializes it with the assortment $config that we divers to a higher place.
- if (!$this->upload->do_upload('profile_image')) {…} attempts to upload the submitted paradigm which in our case is named profile_image
- $error = array('fault' => $this->upload->display_errors()); sets the error message if the upload fails
- $this->load->view('files/upload_form', $mistake); loads the file upload form and displays the error message that is returned from the upload library
- $data = array('image_metadata' => $this->upload->data()); sets the image metadata if the upload has been successful
- $this->load->view('files/upload_result', $data); loads the uploaded successfully view and passes the uploaded file metadata.
That is it for the controller. Permit's now create the directory where our images will be uploaded to. Create a new directory "images" in the root directory of your application
Finally, we volition advertizing two routes to our routes.php file that volition display the form and display results
Open application/config/routes.php Add the following routes $road['upload-image'] = 'imageuploadcontroller'; $route['shop-image'] = 'imageuploadcontroller/store';
HERE,
- $route['upload-image'] = 'imageuploadcontroller'; defines the URL upload-image that calls the index method of ImageUploadController
- $road['shop-image'] = 'imageuploadcontroller/store'; defines the URL store-image that accepts the selected user file and uploads it to the server.
Testing the awarding
Permit's get-go the built-in PHP server
Open the last/ control line and browse to the root of your application. In my case, the root is located in drive C:\Sites\ci-app
cd C:\Sites\ci-app
start the server using the following command
php -South localhost:3000
Load the following URL in your web browser: http://localhost:3000/upload-image
you will exist able to see the post-obit results
Click on choose file
You should be able to see a dialog window like to the following
Select your desired image and so click on open
The selected file proper name will testify up in the form upload as shown in the image above. Click on an upload paradigm button
Yous will become the following results assuming everything goes well
Click on View My Image! Link
You should be able to see the image that you lot uploaded. The results will be like to the post-obit
Notice uploaded image name is displayed in the URL. Nosotros got the image proper name from the uploaded image metadata
Note: The File Upload process remains the aforementioned for other types of files
gallaherexprion1962.blogspot.com
Source: https://www.guru99.com/codeigniter-file-upload.html
Belum ada Komentar untuk "Profile Image Upload Codeigniter Ajax Jquery Github"
Posting Komentar