Php Uploading Photos How Does Browser Send
CodeIgniter File Upload
File direction is essential to most web applications. If you are developing a content management system, then y'all will need to be able to upload images, word documents, pdf reports, etc. If you lot are working on a membership site, you may need to take a provision for people to upload their profile images. CodeIgniter's File Uploading grade makes it easy for us to do all of the above.
In this tutorial, we will look at how to use the file upload library to load files.
Uploading Images in CodeIgniter
File uploading in CodeIgniter has two 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 form and writes information technology to the upload directory.
Let'due south begin with the input form.
Create a new directory called files in awarding/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 image including a link that we can click to view the results.
Add the following code to upload_form.php
<!DOCTYPE html> <html> <head> <title>CodeIgniter Image Upload</title> <meta charset="UTF-viii"> <meta proper noun="viewport" content="width=device-width, initial-scale=1.0"> </caput> <trunk> <div> <h3>Select an image from your computer and upload it to the cloud</h3> <?php if (isset($error)){ echo $fault; } ?> <grade method="post" 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 Prototype" /> </form> </div> </trunk> </html> HERE,
- if (isset($fault)){…} checks if the error variable has been gear up. If the result is true and then the error returned by the upload library is displayed to the user.
- <input type="file" id="profile_image" name="profile_image" size="33″ /> the type file allows the user to browser to their calculator and select a file for uploading.
Advertising the post-obit code to upload_result.php
<!DOCTYPE html> <html> <head> <championship>Image Upload Results</title> <meta charset="UTF-viii"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </caput> <trunk> <div> <h3>Congratulations, the image has successfully been uploaded</h3> <p>Click here to view the image you just uploaded <?=anchor('images/'.$image_metadata['file_name'], 'View My Paradigm!')?> </p> <p> <?php echo anchor('upload-image', 'Get dorsum to Image Upload'); ?> </p> </div> </body> </html> Here,
- <?=ballast('images/'.$image_metadata['file_name'], 'View My Image!')?> uses the anchor helper to create a link to the new uploaded file in the images directory. The proper noun is retrieved from the paradigm metadata that is passed to the view when the file has successfully been uploaded.
Let's at present create the controller that will reply to our image uploading
Add a new file ImageUploadController.php in application/controllers
Add together the post-obit code to ImageUploadController.php
<?php defined('BASEPATH') OR exit('No direct script access allowed'); class ImageUploadController extends CI_Controller { public function __construct() { parent::__construct(); $this->load->helper('url', 'form'); } public role alphabetize() { $this->load->view('files/upload_form'); } public part 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')) { $mistake = assortment('error' => $this->upload->display_errors()); $this->load->view('files/upload_form', $error); } else { $data = assortment('image_metadata' => $this->upload->data()); $this->load->view('files/upload_result', $data); } } } Hither,
- class ImageUploadController extends CI_Controller {…} defines our controller class and extends the base controller CI_Controller
- public office __construct() {…} initializes the parent constructor method and loads the url and form helpers
- public role index() {…} defines the index method that is used to display the epitome upload form
- public role store() {…} defines the method that will upload the image and store it on the web application server.
- $config['upload_path'] = './images/'; sets the directory where the images should exist uploaded
- $config['allowed_types'] = 'gif|jpg|png'; defines the acceptable file extensions. This is of import for security reasons. The allowed types ensures that only images are uploaded and other file types such as php cant be uploaded because they have the potential to compromise the server.
- $config['max_size'] = 2000; set the maximum file size in kilobytes. In our instance, the maximum file that can be uploaded is ii,000kb close to 2MB. If the user tries to upload a file larger than 2,000kb, then the paradigm will fail to upload and the library will return an error message.
- $config['max_width'] = 1500; sets the maximum width of the image which in our case is one,500 px. Whatever width larger than that results in an mistake
- $config['max_height'] = 1500; defines the maximum acceptable height.
- $this->load->library('upload', $config); loads the upload library and initializes it with the array $config that we defined above.
- if (!$this->upload->do_upload('profile_image')) {…} attempts to upload the submitted image which in our instance is named profile_image
- $error = assortment('error' => $this->upload->display_errors()); sets the mistake message if the upload fails
- $this->load->view('files/upload_form', $error); loads the file upload class and displays the fault bulletin that is returned from the upload library
- $information = array('image_metadata' => $this->upload->data()); sets the prototype 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 information technology for the controller. Allow'southward at present create the directory where our images will be uploaded to. Create a new directory "images" in the root directory of your application
Finally, we will ad two routes to our routes.php file that will brandish the grade and display results
Open up application/config/routes.php Add the following routes $route['upload-image'] = 'imageuploadcontroller'; $route['store-image'] = 'imageuploadcontroller/shop';
HERE,
- $road['upload-image'] = 'imageuploadcontroller'; defines the URL upload-prototype that calls the index method of ImageUploadController
- $route['store-epitome'] = 'imageuploadcontroller/shop'; defines the URL store-image that accepts the selected user file and uploads it to the server.
Testing the application
Let'south start the built-in PHP server
Open up the terminal/ command 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
kickoff the server using the following command
php -S localhost:3000
Load the following URL in your spider web browser: http://localhost:3000/upload-image
y'all will be able to see the following results
Click on choose file
Yous should exist able to come across a dialog window similar to the following
Select your desired paradigm then click on open
The selected file proper name will show up in the grade upload as shown in the image above. Click on an upload image button
You will get the following results assuming everything goes well
Click on View My Image! Link
You should be able to run into the image that you lot uploaded. The results will be similar to the post-obit
Notice uploaded epitome proper noun is displayed in the URL. We got the paradigm proper noun from the uploaded image metadata
Note: The File Upload process remains the same for other types of files
Source: https://www.guru99.com/codeigniter-file-upload.html
0 Response to "Php Uploading Photos How Does Browser Send"
Post a Comment