Display Image before saving to bank

Question

Display Image before saving to bank

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I'm trying to show an image, before saving it in the bank, in an image field. The following is an attachment that I'm using:

<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 here 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 an error, but does not load the image, I would like to open FileUpload and select the image, it appears in the Image field, so the user can see the image, and then save it, the save part is working already. Thank you.

javascript html

asked by anonymous 10.05.2017 / 17:35

2 answers

1

I have package ready to be used (contains version jQuery )

link

It's basically the same code that was once used as a response.

10.05.2017 / 18:43

Cordova, how to change the color of the control bar: back, home and windows Why does Retrofit throw an exception when the status code is 204?

score 1 · Accepted Answer

To display the image after it is selected, it is possible with the FileReader API:

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" />