• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » PHP » How To Upload Image Using PHP, AdminLTE Framework And JQuery Plugin For Beginner

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

By Sigit Prasetya Nugroho ∙ August 4, 2017 ∙ PHP ∙ 2 Comments

Share : TwitterFacebookTelegramWhatsapp

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

Table of Contents

  • 1 PHP tutorial how to upload image using PHP and Jquery
    • 1.1 # Upload images manually using PHP and Javascript
    • 1.2 # PHP Tutorial Upload images using cropbox.js.
    • 1.3 # PHP Tutorial Upload an image using the “jQuery File Upload” Plugin
    • 1.4 So my article about How To Upload Image Using PHP, AdminLTE Framework And JQuery Plugin For Beginner may be useful

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.

Related Articles :

  • Create a Sales Form / POS – Tutorial Build Point Of Sale With PHP, PDO, MySQL And Jquery Part 5
  • Create Master Item / Product Form – Tutorial Build Point Of Sale With PHP, PDO, MySQL And Jquery Part 4.
  • Create Form User – Tutorial Build Point Of Sale With PHP, PDO, MySQL And Jquery Part 3.

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:
    1
    2
    3
    4
    5
    6
    7
    8
    <input type="file" id="file" onchange='openFile(event)' style="float:left; width: 250px">
                   <input type="hidden" id="image">
                   <br>
                   <br>
                   <button id="clicktest" class="btn btn-default">Test Upload</button>
                   <br>
                   <br>
                   <img id="myimage" src=""/>
  3. Add the following javascript code:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
      var openFile = function(event) {
      var openFile = function(event) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function(){
          document.getElementById('image').value = reader.result;
        };
        reader.readAsDataURL(input.files[0]);
      };
      $("#clicktest").click(function(){
        var value = {
          img : window.btoa($("#image").val()),
        }
        $.ajax(
        {
          url : "ajax1.php",
          type: "POST",
          data : value,
          success: function(data, textStatus, jqXHR)
          {
            var data = jQuery.parseJSON(data);
            $("#myimage").attr("src",' data : image/jpeg ; base64,'+data.img);
            
          },
          error: function(jqXHR, textStatus, errorThrown)
          {
     
          }
        });
      })

    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
    1
    <!--?php $data=base64_decode($_ POST['img']); list($type, $data) = explode(';', $data); list(, $data) = explode(',', $data); $typedata = explode("/", $type); $type = $typedata[1]; // upload image to folder $xdata = base64_decode($data); file_put_contents('new_image.'.$type, $xdata); /********mysql connection*****/ $host="localhost"; $user="root"; $pwd=""; $dbname="testupload"; $link=mysql_connect($host,$user,$pwd); $db = mysql_select_db($dbname,$link); if(!$db) echo mysql_error(); // insert into database mysql_query('insert into pos(image) values("'.$data.'")'); //*******************// $array = array(); $array['img'] = $data; echo json_encode($array); ?-->

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
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    .imageBox
        {
          position: relative;
          height: 400px;
          width: 400px;
          border:1px solid #aaa;
          background: #fff;
          overflow: hidden;
          background-repeat: no-repeat;
          cursor:move;
        }
     
        .imageBox .thumbBox
        {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 200px;
          height: 200px;
          margin-top: -100px;
          margin-left: -100px;
          border: 1px solid rgb(102, 102, 102);
          box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
          background: none repeat scroll 0% 0% transparent;
        }
     
        .imageBox .spinner
        {
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          text-align: center;
          line-height: 400px;
          background: rgba(0,0,0,0.7);
        }
        .action
        {
          width: 400px;
          height: 30px;
          margin: 10px 0;
        }
        .cropped>img
        {
          margin-right: 10px;
        }
  5. Find the code “<div class=”box-body”>” and add the following script under the code
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <div class="container">
                      <div class="imageBox">
                        <div class="thumbBox"></div>
                        <div class="spinner" style="display: none">Loading...</div>
                      </div>
                      <div class="action">
                        <input type="file" id="file" style="float:left; width: 250px">
                        <input type="button" id="btnCrop" value="Crop" style="float: right">
                        <input type="button" id="btnZoomIn" value="+" style="float: right">
                        <input type="button" id="btnZoomOut" value="-" style="float: right">
                      </div>
                      <div class="cropped">
     
                      </div>
                      <img id="myimage" src=""/>
                    </div>
  6. Add the following javascript code
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    $(window).load(function() {
        var options =
        {
          thumbBox: '.thumbBox',
          spinner: '.spinner',
          imgSrc: 'avatar.png'
        }
        var cropper = $('.imageBox').cropbox(options);
        $('#file').on('change', function(){
          var reader = new FileReader();
          reader.onload = function(e) {
            options.imgSrc = e.target.result;
            cropper = $('.imageBox').cropbox(options);
          }
          reader.readAsDataURL(this.files[0]);
        })
        $('#btnCrop').on('click', function(){
          var img = cropper.getDataURL();
          $('.cropped').html("");
          $('.cropped').append('<img class="display:block" id="images" src="'+img+'"><br><button id="saveimage" class="btn btn-default">Save Image</button><br><br>');
        })
        $('#btnZoomIn').on('click', function(){
          cropper.zoomIn();
        })
        $('#btnZoomOut').on('click', function(){
          cropper.zoomOut();
        })
      });
     
      $(document).on("click","#saveimage",function(){
        var value = {
          img : window.btoa($("#images").attr("src")),
        }
        $.ajax(
        {
          url : "ajax1.php",
          type: "POST",
          data : value,
          success: function(data, textStatus, jqXHR)
          {
           var data = jQuery.parseJSON(data);
            $("#myimage").attr("src","data : image/jpeg ; base64,"+data.img);
          },
          error: function(jqXHR, textStatus, errorThrown)
          {
     
          }
        });
        
      })

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>
    1
    <link rel="stylesheet" href="../../dist/css/jquery.fileupload.css">

    Add a script to call the Jquery plugin with the following code
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <script src="../../dist/js/jqueryupload/vendor/jquery.ui.widget.js"></script>
    <script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
    <!-- The Canvas to Blob plugin is included for image resizing functionality -->
    <script src="//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
    <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
    <script src="../../dist/js/jqueryupload/jquery.iframe-transport.js"></script>
    <!-- The basic File Upload plugin -->
    <script src="../../dist/js/jqueryupload/jquery.fileupload.js"></script>
    <!-- The File Upload processing plugin -->
    <script src="../../dist/js/jqueryupload/jquery.fileupload-process.js"></script>
    <!-- The File Upload image preview & resize plugin -->
    <script src="../../dist/js/jqueryupload/jquery.fileupload-image.js"></script>
    <!-- The File Upload audio preview plugin -->
    <script src="../../dist/js/jqueryupload/jquery.fileupload-audio.js"></script>
    <!-- The File Upload video preview plugin -->
    <script src="../../dist/js/jqueryupload/jquery.fileupload-video.js"></script>
    <!-- The File Upload validation plugin -->
    <script src="../../dist/js/jqueryupload/jquery.fileupload-validate.js"></script>
  7. Find the code <div class="box-body"> and add the following html script under the code

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <span class="btn btn-success fileinput-button">
    <i class="glyphicon glyphicon-plus"></i>
    <span>Add files...</span>
    <!-- The file input field used as target for the file upload widget -->
    <input id="fileupload" type="file" name="files[]" multiple>
    </span>
    <br>
    <br>
    <!-- The global progress bar -->
    <div id="progress" class="progress">
    <div class="progress-bar progress-bar-success"></div>
    </div>
    <!-- The container for the uploaded files -->
    <div id="files" class="files"></div>
    <br>
  8. Insert the following javascript code

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    /*jslint unparam: true, regexp: true */
    /*global window, $ */
    $(function () {
    'use strict';
        // Change this to the location of your server-side upload handler:
        var url = 'server/',
        uploadButton = $('<button/>')
        .addClass('btn btn-primary')
        .prop('disabled', true)
        .text('Processing...')
        .on('click', function () {
         var $this = $(this),
         data = $this.data();
         $this
         .off('click')
         .text('Abort')
         .on('click', function () {
         $this.remove();
         data.abort();
         });
         data.submit().always(function () {
         $this.remove();
         });
        });
        $('#fileupload').fileupload({
         url: url,
         dataType: 'json',
         autoUpload: false,
         acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
         maxFileSize: 999000,
            // Enable image resizing, except for Android and Opera,
            // which actually support image resizing, but fail to
            // send Blob objects via XHR requests:
            disableImageResize: /Android(?!.*Chrome)|Opera/
            .test(window.navigator.userAgent),
            previewMaxWidth: 100,
            previewMaxHeight: 100,
            previewCrop: true
        }).on('fileuploadadd', function (e, data) {
         data.context = $('<div/>').appendTo('#files');
         $.each(data.files, function (index, file) {
         var node = $('<p/>')
         .append($('<span/>').text(file.name));
         if (!index) {
         node
         .append('<br>')
         .append(uploadButton.clone(true).data(data));
         }
         node.appendTo(data.context);
         });
        }).on('fileuploadprocessalways', function (e, data) {
         var index = data.index,
         file = data.files[index],
         node = $(data.context.children()[index]);
         if (file.preview) {
         node
         .prepend('<br>')
         .prepend(file.preview);
         }
         if (file.error) {
         node
         .append('<br>')
         .append($('<span class="text-danger"/>').text(file.error));
         }
         if (index + 1 === data.files.length) {
         data.context.find('button')
         .text('Upload')
         .prop('disabled', !!data.files.error);
         }
        }).on('fileuploadprogressall', function (e, data) {
         var progress = parseInt(data.loaded / data.total * 100, 10);
         $('#progress .progress-bar').css(
         'width',
         progress + '%'
         );
        }).on('fileuploaddone', function (e, data) {
         $.each(data.result.files, function (index, file) {
         if (file.url) {
         var link = $('<a>')
         .attr('target', '_blank')
         .prop('href', file.url);
         $(data.context.children()[index])
         .wrap(link);
         } else if (file.error) {
         var error = $('<span class="text-danger"/>').text(file.error);
         $(data.context.children()[index])
         .append('<br>')
         .append(error);
         }
         });
        }).on('fileuploadfail', function (e, data) {
         $.each(data.files, function (index) {
         var error = $('<span class="text-danger"/>').text('File upload failed.');
         $(data.context.children()[index])
         .append('<br>')
         .append(error);
         });
        }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
    });


    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

[sociallocker id=58]

url :php tutorial how to upload image with three different method example project download
password : seegatesite.com

[/sociallocker]

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

Another PHP Related Post :

  • Tutorial Create Simple POS Using ReactJS And Laravel Lumen Part 1
  • How To Replace String With Another String In PHP
  • Login Page – Tutorial CRUD Client and API Server Using JQuery And Lumen Part 2
  • Tutorial CRUD Client and API Server Using JQuery And Lumen Part 1
  • How To Solve Problems Illegal mix of collations (latin1_swedish_ci,IMPLICIT) In Laravel
  • How To Resolve No ‘Access-Control-Allow-Origin’ Header In Lumen

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Comments

  1. Avatar for Michael NwuzorMichael Nwuzor says

    October 26, 2020 at 12:03 pm

    Hi Have shared your page on tweeter using the tweeter button at the top but your download buttons are not showing

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      October 28, 2020 at 1:51 am

      url : https://seegatesite.com/php-tutorial-how-to-upload-image-using-php-with-3-different-method-example-project/
      password : seegatesite.com

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Welcome to my Home,

Avatar for Sigit Prasetya NugrohoThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) lumen api (4) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (8) Publisher Tips (5) react (6) Reactjs (9) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2022 Seegatesite.com