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.

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.
2. Find the code <div class="box-body"> and add the following script under the code:
   
   <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=""/>

   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:
   
   JavaScript

   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) { } }); })

   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
   
   <!--?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); ?-->

   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 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
   
   .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; }

   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
   
   <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>

   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
   
   $(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) { } }); })

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

   1	<link rel="stylesheet" href="../../dist/css/jquery.fileupload.css">

   
   Add a script to call the Jquery plugin with the following code
   
   <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>

   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
   
   
   <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>

   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
   
   
   /*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'); });

   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

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.

• Bio
• Latest Posts

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.

Latest posts by Sigit Prasetya Nugroho (see all)

• Tutorial Create Todolist App With Vue Js 2 For Beginners - September 29, 2018
• Create WordPress Slider Without Javascript - August 30, 2018
• Typed.js The Javascript Library For Automatic Text Writing Effects - August 6, 2018