Question

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

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

和FileUpload＆amp;按钮控制

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

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

这可以自动完成吗？

Answer 1

在File Api HTML5（Example: Using files from web applications）input type="file"的帮助下，您可以轻松完成此任务。更改标记以使用asp:FileUpload而不是runat="server"并添加ID，添加标记<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" />以使其可从服务器访问。您的标记应如下所示：

previewFile

现在在文档的头部添加一个javascript函数<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>：

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

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

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

{{1}}

如何在FileUpload控制器中选择路径而不单击后显示图像

1 个答案: