C# 如何在FileUpload controller中选择路径后显示图像而不单击

最近我一直在ASP.NET（c#）中开发web表单应用程序： 我有一个图像控件：

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

和文件上传和按钮控制

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

当用户点击按钮时，执行“上传”代码（图像被发送到数据库）。问题是，我喜欢在用户单击“绝望”按钮之前显示用户在化身图像控制器中选择的图像

---

有可能自动完成吗？

借助HTML5的

文件Api

（），您可以轻松完成这项工作。将标记更改为使用

input type=“file”

而不是

asp:FileUpload

并添加ID，添加标签

runat=“server”

，以使其可从服务器访问。您的标记应该如下所示：

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

现在，选择图像后，您可以看到如下预览：

您可以使用css将其大小重新调整为缩略图。 单击上载按钮后，您可以在代码中找到发布的文件：

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

---

哇！非常感谢这正是我想要的+1任何想法为什么我得到

未捕获的语法错误：未能在“文档”上执行“querySelector”：“#”不是有效的选择器。

错误？

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