• PHP
  • MySQL
  • Demos
  • HTML
  • CSS
  • jQuery
  • Framework
  • Social
  • Request Tutorial
PHP Lift
  • Home
  • Demos
  • PHP Jobs
  • Advertisement
PHP Lift
  • PHP
  • MySQL
  • Demos
  • HTML
  • CSS
  • jQuery
  • Framework
  • Social
  • Request Tutorial
  • Follow
    • Facebook
    • Twitter
    • Google+
    • Youtube
    • RSS
How to show Image before upload JavaScript & HTML5 FileReader()
Home
HTML 5

How to show Image before upload JavaScript & HTML5 FileReader()

November 2nd, 2020 Huzoor Bux API, HTML 5, JavaScript 1 comments

Facebook Twitter Google+ LinkedIn Pinterest

Show image before the upload is a requirement of every web application to give good user experience. We published a tutorial that doesn’t work in all browsers so; now I am going to give you this tutorial it will work on every browser which supports HTML5  File API and JavaScript check compatibility of API here. I hope you like this tutorial as all other tutorials.

DEMO
DOWNLOAD CODE

First of all, we need to know what FileReader is?

FileReader is an API of HTML5 used to interact with local files. Example of its capabilities, the FileReader API could be used to create a thumbnail preview of images as they’re being sent to the server. You could use client-side logic to verify an upload’s file type matches its file extension or restrict the size of an upload etc.

Browser compatibility for filereader api

Let’s start with HTML for single file show thumbnail.

<input type="file" id="file" name="file" />
<span id="output"></span>

That above code show you a file uploader you can select 1 file at a time.

JavaScript code to show image thumbnails

<script>
  function handleFileSelect(evt) {
    var file = evt.target.files; // FileList object

    var f = file[0];

      // Only process image files.
      if (!f.type.match('image.*')) {
        alert("Image only please....");
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" title="', escape(theFile.name), '" src="', e.target.result, '" />'].join('');
          document.getElementById('output').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  

  document.getElementById('file').addEventListener('change', handleFileSelect, false);
</script>

That above JavaScript calls on change event of file element. This example can upload 1 file at a time for multiple files you can add a for a loop as below.

<script>
  function handleFileSelect(evt) {
    var file = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        alert("Image only please....");
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" title="', escape(theFile.name), '" src="', e.target.result, '" />'].join('');
          document.getElementById('output').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
}
  

  document.getElementById('file').addEventListener('change', handleFileSelect, false);
</script>

This will show you multiple files thumbnails after selection. for complete source code Download it and enjoy.

If you face any issue in its configuration please feel free to comment we love to help you.

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)

Related

  • Tags
  • FileReader
  • How to
  • HTML5
  • javascript
Facebook Twitter Google+ LinkedIn Pinterest
Next article Create pure CSS based toggle visibility button
Previous article Create Live Search in HTML table with jQuery

Huzoor Bux

I am a PHP Developer

Related Posts

Stripe Payment Gateway Charge Credit Card with PHP API
February 15th, 2021

Stripe Payment Gateway Charge Credit Card with PHP

Simple PHP REST API with Slim, PHP & MySQL API
August 27th, 2020

Simple PHP REST API with Slim, PHP & MySQL

PHP Contact Form with Google reCAPTCHA V3 API
August 24th, 2020

PHP Contact Form with Google reCAPTCHA V3

1 Comment

  1. ibadullah
    November 2, 2020 at 10:35 am Reply ↓

    Hi bro
    do you have code script for newsletter?

Leave a Reply Cancel reply

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

Advertisement
Recent Posts
  • Stripe Payment Gateway Charge Credit Card with PHP
  • How to building responsive WordPress theme using Bootstrap
  • 6 Reasons Laravel is the Top PHP Framework in the Web Development Industry
  • 9 Best Programming languages you should learn in 2021
  • 12 Reasons to Choose PHP for Developing Website
Categories
  • API
  • Bootstrap
  • CSS
  • CSS 3
  • Designing
  • Framework
  • Guide
  • HTML
  • HTML 5
  • JavaScript
  • jQuery
  • MySQL
  • Node.js
  • oAuth
  • Payment
  • PHP
  • Python
  • Social
  • Tips
  • WordPress
Weekly Tags
  • PHP
  • api
  • How to
  • PHP Basics
  • Programming Habits
  • HTML5
  • PHP framework
  • Download
  • laravel
  • css
  • About
  • Privacy Policy
  • Back to top
© PHPLift 2020. All rights reserved.