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

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

Desarrollo web en mexico df

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 artículo:

Más artículos geniales

¿Cómo leer los atributos data de HTML5 con jQuery?

¿Cómo leer los atributos data de HTML5 con jQuery?

Una de las novedades de HTML5 es que podemos utilizar el atributo data para asignar valores personalizados a cada elemento HTML en particular.

Ver artículo completo
Cómo usar los bucles en JavaScript con For, While o Do While

Cómo usar los bucles en JavaScript con For, While o Do While

En este artículo, explicare el uso básico de las estructuras de control para producir bucles o repeticiones. Los bucles pueden ejecutar bloques de código cualquier cantidad de veces que sea necesario.

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla ;