Search This Blog

Saturday, September 8, 2012

Image Preview On FileUpload Change


 Add jquery  reference in 'head' tag

jquery-1.4.3.min.js

 Add Image and FileUpload control in html :

                         <table >
                 <tr>
                    <td>
                        <span >Logo Path</span>
                    </td>
                    <td>
                        <input name="FileUpload1" id="FileUpload1" onchange="showPreview(this)" style="width:260px;" type="file">
                    </td> 
                </tr>
                       </table>
                    <div >
                      <img id="imgLogo" alt="" src="" style="width: 77px; height: 66px" />
                  </div>
 Write Javascript  Function:

<script language="javascript" type="text/javascript">


        function showPreview(ele) {
            $('#imgLogo').attr('src', ele.value); // for IE
            if (ele.files && ele.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                $('#imgLogo').attr('src', e.target.result);
                }
                reader.readAsDataURL(ele.files[0]);
            }
        }

</script>

No comments:

Post a Comment