如何在FileUpload控制器中选择路径而不单击后显示图像
mol*_*008 10 c# asp.net file-upload image
最近我一直在开发ASP.NET中的Web表单应用程序(c#):我有一个Image控件:
<asp:Image ID="Avatar" runat="server" Height="225px" ImageUrl="~/Images/NoUser.jpg" Width="225px" />
和FileUpload&Button控件
<asp:FileUpload ID="avatarUpload" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="Upload" />
当用户单击按钮时,执行"上载"代码(图像被发送到数据库).问题是我喜欢在用户点击"绝望"按钮之前显示用户在"阿凡达"图像控制器中选择的图像.
这可以自动完成吗？
afz*_*ulh 29
在(示例:使用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" 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>
选择图像后,您可以看到如下预览:
您可以使用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.
}