Vb.net fileupload preview image using javascript

Question

I want to up load image using fileupload and preview the selected image before submit, but it can only work in firefox and IE6. I want to work in IE 7 8 and chrome, also it should work in firefox

<style type="text/css">
#newPreview
{ 
  filter: progidXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
    width: 136px;
    height: 134px;
    margin-left: 1px;
} 
</style>

<script language="javascript" type="text/javascript">
function PreviewImg(imgFile) {
    var newPreview = document.getElementById("newPreview");
    var src;
    if (document.all) {
        newPreview.innerHTML = "<img src=\"file:///" + imgFile.value + "\" width=\"130px\">";
    }
    else {
        newPreview.innerHTML = "<img src=\"" + imgFile.files.item(0).getAsDataURL() + "\" width=\"130px\">";
    }
}

    <form id="form1" runat="Server" method="post" enctype="multipart/form-data">
       <div id="newPreview">
      <asp:FileUpload ID="file" runat="server" size="20" Width="129px" 
          onchange="PreviewImg(this)"/>

Try this : http://forums.asp.net/t/1740831.aspx/1?Preview+Image+before+upload+ and http://www.asp.net/web-pages/tutorials/files,-images,-and-media/9-working-with-images — Pandian, Apr 11 '13 at 12:47
If you use MVC, you might try [this](http://stackoverflow.com/questions/9092723/preview-image-before-uploading-file) method... — Murat Yıldız, Mar 13 '15 at 14:07

Pandian · Answer 1 · 2013-04-11T12:47:22.987

Try like below.. Its working in FireFox and Chrome

It will help you...

CSS :

<style>
#imgPreview
{ 
filter: progidXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
width: 136px;
height: 134px;
margin-left: 1px;
} 
</style>

Script:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script>
        function PreviewImg(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#imgPreview').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }
</script>

HTML :

<asp:FileUpload ID="file" runat="server" size="20" Width="258px" 
          onchange="PreviewImg(this)"/>
          <img id="imgPreview" src="#"/>

Vb.net fileupload preview image using javascript

1 Answers1