View Selected Image jQuery

Question

I’m doing my TCC and it will be about image processing. I’m having difficulty with the web part, and wanted to know how I do to load the selected image in the input file appear on the page. Here is 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>

Answer 1

I changed certain aspects of the 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 demonstration on this Jsfiddle