Instant Thumbnail generation using Javascript

Generating instant thumbnail before the file is being uploaded.

HTML5 Filereader allows us to create data URL from any image binary data. This is the trick we applied here for generating thumbnail instantly.

It is fast and efficient way to generate thumnail than from Server.

Javascript Thumnail Generation using HTML5 FileReader API

Following Javascript Code generates the Thumnail as DataURI.

    <script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                
                reader.onload = function (e) {
                    $('#blah').attr('src', e.target.result);
                }
                
                reader.readAsDataURL(input.files[0]);
            }
        }
        
        $("#imgInp").change(function(){
            readURL(this);
        });
    });//]]>  
    </script>

Complete Code with Bootstrap Responsive Page.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="container">

      <div class="starter-template">
        <h1>Bootstrap Responsive Page</h1>
      </div>

        <form id="form1" runat="server">
            <input type='file' id="imgInp" />
            <br>
            <img id="blah" src="https://cdn0.iconfinder.com/data/icons/superuser-web-kit-thin/512/686941-user_people_man_human_head_person-256.png" alt="your image" height="200" />
        </form>
    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
    <script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                
                reader.onload = function (e) {
                    $('#blah').attr('src', e.target.result);
                }
                
                reader.readAsDataURL(input.files[0]);
            }
        }
        
        $("#imgInp").change(function(){
            readURL(this);
        });
    });//]]>  
    </script>
  </body>
</html>

Instant Thumbnail generation using Javascript - File Upload

2 Comments

Contact Form