问

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

Saber木木-汐7rv 发布于 2023-02-13 15:14

asp.net

最近我一直在开发ASP.NET中的Web表单应用程序(c#):我有一个Image控件:

和FileUpload&Button控件

当用户单击按钮时,执行"上载"代码(图像被发送到数据库).问题是我喜欢在用户点击"绝望"按钮之前显示用户在"阿凡达"图像控制器中选择的图像.

这可以自动完成吗？

1 个回答

在(示例:使用Web应用程序中的文件)的帮助下File Api,您可以轻松完成此任务.更改标记以使用而不是添加ID,添加标记以使其可从服务器访问.您的标记应如下所示:HTML5input type="file"asp:FileUploadrunat="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"  ImageUrl="~/Images/NoUser.jpg"  />

现在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>

选择图像后,您可以看到如下预览: 在此输入图像描述

您可以使用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.
}

2023-02-13 15:17 回答

EvilMaknaeKYU

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签