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

Creamos un nuevo "Sitio Web" en Visual Studio.
Al crear el sitio, el visual studio automáticamente nos crea una página llamada Default.aspx o tú creas una, la abrimos.
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"  />

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>

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)" />

Ahora prueba el ejemplo a ver como funciona y comentas que te parecio.
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>