formulario - jquery link href

¿Cómo obtener una vista previa de la imagen seleccionada en el tipo de entrada="archivo" en la ventana emergente usando jQuery?

Question

Esta pregunta ya tiene una respuesta aquí:

• Vista previa de una imagen antes de que se cargue 20 respuestas

En mi código, estoy permitiendo que el usuario cargue una imagen. Ahora quiero mostrar esta imagen seleccionada como una vista previa en esta misma ventana emergente. ¿Cómo puedo hacerlo usando jQuery?

El siguiente es el tipo de entrada que estoy usando en mi ventana emergente.

Código HTML:

<input type="file" name="uploadNewImage">

Answer 1

Puede usar la carga de jajax para obtener una vista previa del archivo seleccionado. http://zurb.com/playground/ajax-upload

Answer 2

Si está utilizando HTML5, intente seguir el fragmento de código

<img id="uploadPreview" style="width: 100px; height: 100px;" />
<input id="uploadImage" type="file" name="myPhoto" onchange="PreviewImage();" />
<script type="text/javascript">

    function PreviewImage() {
        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

        oFReader.onload = function (oFREvent) {
            document.getElementById("uploadPreview").src = oFREvent.target.result;
        };
    };

</script>

Answer 3

Solo revisa mis scripts, está funcionando bien:

  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match(''image.*'')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement(''span'');
          span.innerHTML = [''<img class="thumb" src="'', e.target.result,
                            ''" title="'', escape(theFile.name), ''"/>''].join('''');
          document.getElementById(''list'').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById(''files'').addEventListener(''change'', handleFileSelect, false);

#list img{
  width: auto;
  height: 100px;
  margin: 10px ;
}

Answer 4

Demo

HTML:

 <form id="form1" runat="server">
   <input type=''file'' id="imgInp" />
   <img id="blah" src="#" alt="your image" />
</form>

jQuery

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

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

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

$("#imgInp").change(function(){
    readURL(this);
});

Referencia

Answer 5

<script>
function img_pathUrl(input){
   $(''#img_url'')[0].src = (window.URL ? URL : webkitURL).createObjectURL(input.files[0]);
}
</script>

<img src="" id="img_url" alt="your image">
<iput type="file" id="img_file" onChange="img_pathUrl(this);">