View Selected Image jQuery

Question

View Selected Image jQuery

Navigation

#1 by (3 votes)

1

I am doing my TCC and it will be about image processing. I'm having difficulty with the web part, and was wondering how do I load the selected image in the input file to appear on the page. Here's my code:

<script>
$(document).ready(function () {
    $(".Open").change(function (index) {
        if ($('input[type=file]').eq(index).val() != "") {               
            $('#Tela').attr('src', $(this).val());
        }
    });
});
</script>
 <fieldset class ="Img">
  <img id ="Tela" Name ="Tela"></img>
  <input type ="file" name="Arquivo" class="Open"/> 
 </fieldset>

jquery html5 asp.net-mvc

asked by anonymous 14.08.2014 / 16:53

1 answer

How to work with mirrored systems? [closed] jQuery Date "Invalid Date"

score 3 · Accepted Answer

I changed certain aspects in Javascript code.

HTML:

<fieldset class ="Img">
  <input type ="file" id="Arquivo" name="Arquivo" class="Open"/>  
  <img id ="Tela" Name ="Tela"></img>
</fieldset>

Javascript:

function enviar_imagem(input) {
  if (input.files && input.files[0]) {
     var reader = new FileReader();

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

    reader.readAsDataURL(input.files[0]);
  }
}

$("#Arquivo").change(function(){
  enviar_imagem(this);
});

See a demo at JsFiddle