Show Image before saving to bank

Asked

Viewed 321 times

1

I’m trying to show an image, before saving it in the bank, in an image field. The function I am using is attached:

<script type="text/javascript">
       function mostraImagem() {
           var imagem = document.getElementById("imgImage");
           var diretorio = document.getElementById("FileUpload1").value;
           var teste = diretorio.split("\\");
           imgImage.src = teste[3];
       }
</script>

And this is Fileupload where I call the function:

  <asp:Label ID="Label118" runat="server" Text="Vista Anterior" Font-Bold="True"></asp:Label>
                            <span class="ImagemAv" runat="server">            
                                <asp:FileUpload ID="FileUpload1" runat="server" onChange="mostraImagem()"/><br />
                                <asp:Image ID="imgImage" runat="server" />

It does not return error, but does not load the image, would like when opening Fileupload and selecting the image, it appeared in the Image field, for the user to see the image, and then after it saved, the save part is working already. Thank you.

javascript html

2 answers

1


To view the image after it is selected, it is possible with the API Filereader:

Example:

function mostraImagem(img) {
  if (img.files && img.files[0]) {
    var reader = new FileReader();
    var imagem = document.getElementById("imgImage");
    reader.onload = function(e) {
      imagem.src = e.target.result;
    };

    reader.readAsDataURL(img.files[0]);
  }
}
<input type="file" ID="FileUpload1" onChange="mostraImagem(this)" /><br />
<img ID="imgImage" />

  • It worked perfectly Lucas, thank you!

1

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.