Home > Articles > .Net Framework Articles > How to display image on image selection using fileupload control in JQuery.

How to display image on image selection using fileupload control in JQuery.

by vikash kumar   on Jan 28, 2016   Category: .Net Framework  | Level: Beginner  |  Views: 646    |  Points: 100   
Like this article? Bookmark and Share:
This article shows image on every image selection using fileupload control in JQuery.

Put these script codes in head section of the page.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

    <script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>


    <script type="text/javascript">  

        function ShowPreview(input) {  

            if (input.files && input.files[0]) {  

                var ImageDir = new FileReader();  

                ImageDir.onload = function(e) {  

                    $('#impPrev').attr('src', e.target.result);  

                }  

                ImageDir.readAsDataURL(input.files[0]);  

            }  

        }  

    </script>


Put these HTML codes in body section of the page.


<table cellpadding="10" cellspacing="4" width="70%" align="center" style="border: Solid 10px Green;  

        font-weight: bold; font-size: 16pt; background-color: Skyblue; color: Blue;">  

        <tr>  

            <td align="center">  

                Upload Images  

            </td>  

        </tr>  

        <tr>  

            <td>  

                Select Your File To Upload:  

                <input type="file" name="ImageUpload" id="ImageUpload" onchange="ShowPreview(this)" />  

                <asp:Button ID="btnUpload" runat="server" Text="Upload" />  

            </td>  

        </tr>  

        <tr>  

            <td>  

                <asp:Image ID="impPrev" runat="server" Height="200px" />  

            </td>  

        </tr>  

    </table>  



Now you will see the result.


Like this article? Bookmark and Share:

Most viewed Articles

User Comments


No response found, be the first to review this article.

Submit feedback about this article

Please sign in to post feedback

Latest Posts