Instant Thumbnail generation using Javascript - File Upload

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>

2 Comments

  1. Similar technique is followed by leading Image hosting website imgur

    ReplyDelete
  2. Really usefull information at this site! Thank you very much for sharing it!!

    ReplyDelete
Previous Post Next Post