How To Upload Image Using PHP, AdminLTE Framework And JQuery Plugin For Beginner

Not long ago, a visitor was asking how to upload an image in PHP on AdminLTE Framework. He asked how to upload and save images to a MySQL database with Blob data type. Storing images into the MYSQL database is not the right way in my opinion as it will make the database capacity to be large, but maybe he needs it for a particular app.

Read another article : Simple CRUD Apps With Codeigniter Tutorial For Beginners

Actually to look for PHP tutorial how to upload images have been discussed by many big sites that you can find on google search engine. I am trying to explain as much as I can, how to upload images with PHP and JQuery. For this article will explain how to upload images PHP in 3 ways:

  • Upload images manually using PHP and Javascript
  • Upload an image using cropbox.js.
  • Upload an image using the jQuery File Upload Plugin

The three ways above are equally easy, and please choose your own that suits your application to apply to adminLTE Framework

PHP tutorial how to upload image using PHP and Jquery

As a preparation tutorial, please download adminLTE Framework first here. Then create a MySQL database with the name “testupload.” Add a “pos” table and a field with the name “image” type BLOB like the picture below.

Create Database To Insert Image Using Blob Type Php Tutorial How To Upload Image

Extract adminLTE source code and rename the folder to “uploadimages.”. Create new folder “application” in folder “uploadimages/“. Create new folder “upload” in folder “uploadimages/application/

If the above preparations have been completed, let’s start from the first way first

# Upload images manually using PHP and Javascript

  1. Copy the blank.html file in
    uploadimages/pages/examples/” folder to “uploadimages/application/upload/” folder and rename it to upload1.html.Blank Template Adminlte
  2. Find the code <div class="box-body"> and add the following script under the code:
  3. Add the following javascript code:

    Explanation:
    To upload a file or image javascript requires the FileReader() class to process the image. For more details, please visit  javascripture  for more information.
  4. Create a new PHP file with the name ajax1.php in the
    uploadimages/application/upload/” folder and copy the following code

Please test the result in your browser with the following url

http: //localhost/uploadimages/application/upload/upload1.php

If successful, then the application will run like the following picture.

Php Tutorial Upload Images Manually Using PHP And Javascript

# PHP Tutorial Upload images using cropbox.js.

The advantage of using the cropbox.js plugin is cropbox.js has a feature to crop images, often used to create apps that will display thumbnail images.

  1. Download the cropbox.js plugin here https://github.com/hongkhanh/cropbox.
  2. Place the cropbox.js file in the “uploadimages/dist/js/” folder
  3. Copy the blank.html file in folder
    uploadimages/pages/examples/” to “uploadimages/application/upload/” folder and change its name to upload2.html
  4. Copy the following css script
  5. Find the code “<div class=”box-body”>” and add the following script under the code
  6. Add the following javascript code

Run the app in the browser using the URL as follows:

HTTP: //localhost/uploadimages/application/upload/upload2.php“.

If successful, then the application will run like the following picture.

Php Tutorial Upload An Image Using Cropbox.js.

# PHP Tutorial Upload an image using the “jQuery File Upload” Plugin

“JQuery File Upload” is a very nice jquery plugin and the view fits perfectly with the adminLTE framework. Also, the use of this plugin is also effortless.

  1. Download the jquery file plugin uploaded here
  2. extract file jQuery-File-Upload-9.18.0.zip.
  3. copy all files in “js” folder in “jQuery-File-Upload-9.18.0” to folder
    uploadimages/dist/js/ jqueryupload/
  4. Copy the file “jquery.fileupload.css” in the folder “uploadimages/dist/css/
  5. Copy the “server” folder in
    jQuery-File-Upload-9.18.0” folder into the “uploadimages/application/upload/upload” folder
  6. Copy the blank.html file in
    uploadimages/pages/examples/” folder to “uploadimages/application/upload/” folder and rename it to upload3.html.
    Add a script to invoke the following “jquery.fileupload.css” above </ head>

    Add a script to call the Jquery plugin with the following code
  7. Find the code <div class="box-body"> and add the following html script under the code

  8. Insert the following javascript code



    Explanation:
    Change the URL variable to place the location of the uploaded image

Run the app in the browser using the URL as follows

HTTP: //localhost/uploadimages/application/upload/upload3.php“.

The application will run like the following picture

Php Tutorial Upload An Image Using The JQuery File Upload Plugin

From the above three examples, you can apply to your application system integrated with the adminLTE framework.

To download the example above please share this article using the button below to get the download link

So my article about How To Upload Image Using PHP, AdminLTE Framework And JQuery Plugin For Beginner may be useful

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.