¿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>

 

Artículos relacionados
9 Comentarios
  • Bruno Comentar
    Sunday, January 24, 2016

    Excelente, muchísimas gracias por compartirlo :D

  • eric Comentar
    Saturday, February 6, 2016

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

  • eric Comentar
    Saturday, February 6, 2016

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

  • Raquel Comentar
    Thursday, July 14, 2016

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

    • jiestradaComentar
      Thursday, July 14, 2016

      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

    • RaquelComentar
      Thursday, July 14, 2016

      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!

    • JoséComentar
      Thursday, July 14, 2016

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

  • Raquel Comentar
    Thursday, July 14, 2016

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

  • Raquel Comentar
    Thursday, July 14, 2016

    mi coreo es: raquel@microcompostela.com

  • Carden Comentar
    Friday, June 2, 2017

    I was suggested this website by my cousin. I am not sure whether this post is written by him as nobody else know such detailed about my difficulty. You are wonderful! Thanks!

  • Grillo Comentar
    Friday, June 2, 2017

    Wow! In the end I got a website from where I be able to actually obtain useful data regarding my study and knowledge.

  • Swinford Comentar
    Friday, May 25, 2018

    ¿Puedo decir qué alivio hallar a alguien que realmente sepa de lo que están hablando en línea? Claramente sabes de qué forma sacar un inconveniente a la luz y hacerlo importante. Más personas necesitan leer esto y comprender este lado de la historia. No puedo pensar que no seas más popular pues definitivamente tienes el regalo. ¡Volveré, en tanto que he marcado esta página como preferida y lo he twitteado a mis seguidores!

Enviame un comentario