Post
Ask Question

Image Preview Within Selected Division Using JQuery

Step 1

Add new website.



Step 2

Add new WebForm to the website.



Step 3

Add JQuery Script File to the Project.

Step 4

With in the <body> use <input> tag for file control and <div> section to display preview image.

  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div>  
  4.             <input type="file" id="preview" accept="image/png,image/jpeg,image/gif" />  
  5.             <br/>  
  6.             <br/>  
  7.             <div id="dvPreview">  
  8.                 <imgid="blah" src="http://i.imgur.com/zAyt4lX.jpg" alt="your image" height="100" />  
  9.             </div>  
  10.         </div>  
  11.     </form>  
  12. </body>  
Step 5

Within the <script> use file upload “change” event for file upload control like.
  1. $("#preview").change(function () {}  
Step 6

Check whether the file is defined,

 

  • Define a regular expression for imagetype.
    1. var regex= /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;  
  • Condition to check the file: if (typeof (FileReader) != "undefined") {}

  • If the image is in valid format the following code can be followed to preview an image within the selected
    1. <div> section.  
    2.   
    3. $($(this)[0].files).each(function () {  
    4.     var file = $(this);  
    5.         if (regex.test(file[0].name.toLowerCase())) {  
    6.             var reader = newFileReader();  
    7.             reader.onload = function (e) {  
    8.                 varimg = $("<img />");  
    9.                 img.attr("style", "height:110px;width: 110px; border: 1px solid #ddd;border-radius: 4px;padding: 5px;");  
    10.                 img.attr("src", e.target.result);  
    11.                 dvPreview.append(img);  
    12.             }  
    13.             reader.readAsDataURL(file[0]);  
    14.         }  
    15.         else {  
    16.             alert("Invalid format.");  
    17.         }  
    18.     }  
    19. });  

Here in the above code style attributes are also defined for image.

Before selecting the Image.



After selecting the Image.



Here is the total code,

  1. <%@PageLanguage="C#"AutoEventWireup="true"CodeFile="ImageUpload.aspx.cs"Inherits="ImageUpload"%>  
  2.   
  3.     <!DOCTYPEhtml>  
  4.   
  5.     <html xmlns="http://www.w3.org/1999/xhtml">  
  6.     <headr unat="server">  
  7.         <title>Image Preview</title>  
  8.         <script src="Scripts/jquery-3.0.0.min.js">  
  9.         </script>  
  10.         <script type="text/javascript">  
  11.         $(document)  
  12.             .ready(function()  
  13.             {  
  14.                 $("#preview")  
  15.                     .change(function()  
  16.                     {  
  17.                         var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;  
  18.                         if (typeof(FileReader) != "undefined")  
  19.                         {  
  20.                             vardvPreview = $("#dvPreview");  
  21.                             dvPreview.html("");  
  22.                             $($(this)[0].files)  
  23.                                 .each(function()  
  24.                                 {  
  25.                                     var file = $(this);  
  26.                                     if (regex.test(file[0].name.toLowerCase()))  
  27.                                     {  
  28.                                         var reader = newFileReader();  
  29.                                         reader.onload = function(e)  
  30.                                         {  
  31.                                             varimg = $("<img />");  
  32.                                             img.attr("style", "height:110px;width: 110px; border: 1px solid #ddd;border-radius: 4px;padding: 5px;");  
  33.                                             img.attr("src", e.target.result);  
  34.                                             dvPreview.append(img);  
  35.                                         }  
  36.                                         reader.readAsDataURL(file[0]);  
  37.                                     }  
  38.                                     else  
  39.                                     {  
  40.                                         alert("Invalid format.");  
  41.                                     }  
  42.                                 });  
  43.                         }  
  44.                         else  
  45.                         {  
  46.                             alert("This browser does not support HTML5 FileReader.");  
  47.                         }  
  48.                     });  
  49.             });  
  50.         </script>  
  51.         </head>  
  52.   
  53.         <body>  
  54.             <form id="form1" runat="server">  
  55.                 <div>  
  56.                     <input type="file" id="preview" accept="image/png,image/jpeg,image/gif" />  
  57.                     <br/>  
  58.                     <br/>  
  59.                     <div id="dvPreview">  
  60.                         <img id="blah" src="http://i.imgur.com/zAyt4lX.jpg" alt="your image" height="100" />  
  61.                     </div>  
  62.                 </div>  
  63.             </form>  
  64.         </body>  
  65.   
  66.     </html>