How to display image after selecting path in FileU

Recently I have been developing web form application in ASP.NET (c#): I have an Image control:

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

And FileUpload & Button control

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

When user click button then "Upload" code is executed (the image is sent to the database). Problem is that I like to display the image which the user selected in Avatar Image controller before the user clicks "desperate" button.

Is that possible to do this automatically?

标签： c# asp.net image file-upload

1条回答

Root（大扎）

2楼-- · 2019-03-15 16:33

With the help of File Api of HTML5 (Example: Using files from web applications) you can accomplish this easily. Change the markup to use input type="file" instead of asp:FileUpload and add ID, add tag runat="server" to make it accessible from server. Your markup should look like:

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

Now add a javascript function previewFile in the head of 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>

Now after selecting an image you can see the preview like below: enter image description here

You can use css to re-size it to a thumbnail. After clicking the Upload button, in the code you can find the posted file:

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

0人赞添加讨论(0) 举报

How to display image after selecting path in FileU

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间