¿Cómo mostrar la vista previa de una imagen en el control de FileUpload de ASP.NET?

¿Cómo mostrar la vista previa de una imagen en el control de FileUpload de ASP.NET?

Los clientes a menudo desean que se almacene la imagen de los usuarios de algún sistema en particular, pero antes de cargar la imagen de un usuario en el servidor o en una base de datos, el cliente tiene que permitir al usuario una vista previa de su foto.

Hay solución muy simple para realizar esta funcionalidad, usando JavaScript por el cual su página no va a hacer una devolución de datos del servidor y el usuario puede obtener una vista previa de su foto. Demostremos esto mediante la creación de un simple sitio web de la siguiente manera.

  1. Creamos un nuevo "Sitio Web" en Visual Studio.
  2. Al crear el sitio, el visual studio automáticamente nos crea una página llamada Default.aspx o tú creas una, la abrimos.
  3. Agregue un control de carga de archivos llamado "FileUpload1" y un control html de imagen del HTML denominado "img" a la página. El código html quedaría de la siguiente manera:
 <asp:FileUpload ID="FileUpload1" runat="server"  />
  1. Añade una función de JavaScript llamado "showimagepreview ()" en la etiqueta <script> como en el siguiente:
<script type="text/javascript">

        function showimagepreview(input) {

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

                    document.getElementsByTagName("img")[0].setAttribute("src", e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

    </script>
  1. Ahora llama la función en el evento denominado "onchange ()" en el control fileupload que agregaste en el paso 3 con un parámetro, el cual queda de la siguiente manera.
<asp:FileUpload ID="FileUpload1" runat="server" 
            onchange="showimagepreview(this)" />
  1. Ahora prueba el ejemplo a ver como funciona y comentas que te parecio.
  2. Por ultimo te dejo el código completo HTML
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">

        function showimagepreview(input) {

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

                    document.getElementsByTagName("img")[0].setAttribute("src", e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

    </script>



</head>
<body>
    <form id="form1" runat="server">

        <asp:FileUpload ID="FileUpload1" runat="server" 
            onchange="showimagepreview(this)" />

        <img id="img" alt="" style="width:300px" />

    </form>
</body>
</html>

 

Compartir

Comentarios (12)

  • Bruno Responder

    Excelente, muchísimas gracias por compartirlo :D

    Sunday, January 24, 2016 6:25 PM
  • eric Responder

    funciona muy bien. solamente una consulta, cuando la pagina tiene una imagen en el titulo por ejemplo, la función siempre toma la primea,

    Saturday, February 6, 2016 7:56 PM
  • eric Responder

    resuelto en document.getElementsByTagName("img")[0].setAttribute("src", e.target.result); se define que imagen tomar

    Saturday, February 6, 2016 8:02 PM
    • israel valdez Responder

      Disculpa una pregunta, yo tengo 2 imagenes de logotipos de la empresa y en una tercera quiero poner la vista previa, pero ya cambie en la linea: document.getElementsByTagName("img")[1].setAttribute("src", e.target.result); Le puse [0] y [1] y funciona con esas imagenes, pero si mi imagen de vista previa no esta en el encabezado del formulario no funciona la vista previa, me puedes ayudar??? Saludos.

      9/22/2016 9:34:48 PM
  • Raquel Responder

    Genial!! muchas gracias! solo una duda, cuando subes varias imagenes a la ves ( multivalue) como podremos hacer para visualizarlas? Gracias!!!

    Thursday, July 14, 2016 7:12 AM
    • jiestrada Responder

      En ese caso puedes poner un <div> y con jquery a ese div le generas todas las imagenes,
      Digamos que en vez de tener

      <img id="img" alt="" style="width:300px" />

      tienes

      <div id="Divimagenes"><div>

      donde va este codigo

      document.getElementsByTagName("img")[0].setAttribute("src", e.target.result);

      pondrias lo siguiente

      $("#Divimagenes").append("<img src= '" + e.target.result + "' />");

      Pruebalo y me cuentas como te va

      7/14/2016 8:44:11 AM
    • Raquel Responder

      Sorry, igual!. No habrá que cambiar tambien esta linea?: ""reader.readAsDataURL(input.files[0]);"". Esta cogiendo el Primer valor!! Tambien se me ocucrrio pasarle un ForEach pero me lio con los resultados !!! jejejejej GRACIAS DE ANTEMANO!

      7/14/2016 9:21:58 AM
    • José Responder

      tienes razón, hay que hacer un loop mediante un foreach, tienes como lo estas haciendo? mandame lo que tienes y te ayudo. Saludos

      7/14/2016 11:23:31 AM
  • Raquel Responder

    Hola!, ni me deja ponerte urls con pantallazos, ni puedo ponerte el codigo directo porque se rompe la pagina! como hago?

    Thursday, July 14, 2016 10:54 PM
  • Raquel Responder

    mi coreo es: raquel@microcompostela.com

    Thursday, July 14, 2016 10:54 PM
  • Israel Valdez Responder

    Disculpa una pregunta, yo tengo 2 imagenes de logotipos de la empresa y en una tercera quiero poner la vista previa, pero ya cambie en la linea: document.getElementsByTagName("img")[1].setAttribute("src", e.target.result); Le puse [0] y [1] y funciona con esas imagenes, pero si mi imagen de vista previa no esta en el encabezado del formulario no funciona la vista previa, me puedes ayudar??? Saludos y de antemano gracias.

    Thursday, September 22, 2016 9:35 PM
  • Ernesto Guerrero Responder

    Como puedo hacer en mi caso ya que estoy usando masterpage. ya que he intentado pero no me da nada. Si lo hago en una pagina nueva sin la master si me lo permite.

    Thursday, March 9, 2017 1:31 PM

Animate deja un comentario!!!

Eres un humano?

Últimos Tweets

Contáctanos

  • Dirección: Plutarco Elias Calles 243, Granjas México, Iztacalco, DF.

  • Teléfono:55-2712-3820 o 55-4164-9484

  • Email: info@developerji.com