Comment afficher l'image après avoir sélectionné le chemin dans le contrôleur FileUpload sans cliquer

Récemment, j'ai été en développement web formulaire de demande en ASP.NET (c#):
J'ai un contrôle de l'Image:

<asp:Image ID="Avatar" runat="server" Height="225px" ImageUrl="~/Images/NoUser.jpg" Width="225px" />

Et FileUpload & Bouton de contrôle

<asp:FileUpload ID="avatarUpload" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="Upload" />

Lorsque l'utilisateur clique sur le bouton puis sur "Télécharger" le code est exécuté (l'image est envoyée à la base de données). Le problème est que je voudrais afficher l'image de l'utilisateur sélectionné dans l'Image de l'Avatar contrôleur avant que l'utilisateur clique sur "désespérée".

Est-ce possible de faire cela automatiquement?

source d'informationauteur molu2008

  1. 27

    Avec l'aide de File Api de HTML5 (Exemple: Utilisation de fichiers à partir d'applications web) vous pouvez effectuer cela facilement. Changer les balises à utiliser input type="file" au lieu de asp:FileUpload et ajouter l'ID, ajouter une balise runat="server" pour les rendre accessibles à partir du serveur. Votre balisage devrait ressembler à:

    <input ID="avatarUpload" type="file" name="file" onchange="previewFile()"  runat="server" />
<%--<asp:FileUpload ID="avatarUpload" runat="server" />--%>
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="Upload" />
<asp:Image ID="Avatar" runat="server" Height="225px" ImageUrl="~/Images/NoUser.jpg" Width="225px" />

    Maintenant ajouter une fonction javascript previewFile dans l'en-tête du document:

    <head runat="server">
    <title></title>
    <script type="text/javascript">
        function previewFile() {
            var preview = document.querySelector('#<%=Avatar.ClientID %>');
            var file = document.querySelector('#<%=avatarUpload.ClientID %>').files[0];
            var reader = new FileReader();

            reader.onloadend = function () {
                preview.src = reader.result;
            }

            if (file) {
                reader.readAsDataURL(file);
            } else {
                preview.src = "";
            }
        }
    </script>
</head>

    Maintenant, après la sélection d'une image, vous pouvez voir l'aperçu ci-dessous:
    Comment afficher l'image après avoir sélectionné le chemin dans le contrôleur FileUpload sans cliquer

    Vous pouvez utiliser css pour re-la taille de la vignette.
    Après avoir cliqué sur le bouton de Téléchargement, dans le code, vous pouvez trouver le posté fichier:

    protected void Upload(object sender, EventArgs e)
{
    int contentLength = avatarUpload.PostedFile.ContentLength;//You may need it for validation
    string contentType = avatarUpload.PostedFile.ContentType;//You may need it for validation
    string fileName = avatarUpload.PostedFile.FileName;
    avatarUpload.PostedFile.SaveAs(@"c:\test.tmp");//Or code to save in the DataBase.
}