Simple Image Preview Before Upload

Submitted by rinvizle on Tuesday, August 30, 2016 - 16:22.
In this tutorial we will show you how to create a Simple Image Preview Before Upload. This feature lets the user view the chosen image before they upload it. And you can easily add image preview option on file upload using JavaScript and jQuery. Simple Image Preview Before Upload is a most required feature for file upload functionality. It helps the user to view chosen file and change the image before upload. From the user perspective, it is very helpful to uploading perfect image or file without doing the repetitive upload.

Sample Code

Upload.php - This script is use to upload the file to the respective directory when the user clicked on submit button.
  1. <?php
  2. if(isset($_POST['submit']) && !empty($_FILES['file']['name'])){
  3.     if(move_uploaded_file($_FILES['file']['tmp_name'],"uploads/".$_FILES['file']['name'])){
  4.         echo 'File has uploaded successfully.';
  5.     }else{
  6.         echo 'Some problem occurred, please try again.';
  7.     }
  8. }
  9. ?>
JavaScript File Reader - it will be used to read the content of the file in file preview function. Once the file content is loaded we’ll render the image preview under the file upload form.
  1. function filePreview(input) {
  2.     if (input.files && input.files[0]) {
  3.         var reader = new FileReader();
  4.         reader.onload = function (e) {
  5.             $('#uploadForm + img').remove();
  6.             $('#uploadForm').after('<img src="'+e.target.result+'" width="450" height="300"/>');
  7.         }
  8.         reader.readAsDataURL(input.files[0]);
  9.     }
  10. }
  11. $("#file").change(function () {
  12.     filePreview(this);
  13. });
Index.html - This is for the GUI of the web page to make it more responsive and attractive.
  1. <!DOCTYPE html>
  4.         <title>Simple Image Preview Before Upload</title>
  5.         <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
  6.         <link rel="stylesheet" type="text/css" media="screen" href="bootstrap/css/bootstrap.min.css" />
  7.         <script src="js/jquery.min.js"></script>
  8. </head>
  10. <nav class="navbar navbar-default">
  11.   <div class="container-fluid">
  12.     <div class="navbar-header">
  13.       <a class="navbar-brand" href="#"><b>Image Preview Before Upload</b></a>
  14.   </div>
  15. </nav>
  16. <div class="container-fluid">
  17.         <form method="post" action="upload.php" enctype="multipart/form-data" id="uploadForm">
  18.         <div class="button">
  19.                 <input type="file" name="file" id="file" />
  20.                 <input type="submit" class="btn btn-default" name="submit" value="Upload" style="margin-left: 385px;margin-top: -25px;"/>
  21.         </div>
  22.         </form>
  23. </div>
  24. </body>
  25. </html>
Hope that you learn in my tutorial. Don't forget to LIKE & SHARE this website. Enjoy Coding.
Tags
#HTML
#Javascript
#JavaScript #Web #Jquery
Image Preview
Image Upload Preview

Comments

Add new comment

About text formats