如何在不点击的FileUpload控制器选择路径后，显示的图像 [英] How to display image after selecting path in FileUpload controller without clicking
问题描述
最近我一直在开发在ASP.NET（C＃）Web表单应用程序：
我有一个Image控件：
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" />
和文件上传和放大器; Button控件
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?
推荐答案
通过输入类型=文件而不是 ASP：文件上传，并添加标识，添加标签 =服务器，使其从服务器访问。您的标记应该是这样的：
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" />
现在添加一个javascript函数 previewFile 在文件头：
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:
您可以使用CSS来重新它的大小到缩略图。
点击上传按钮后，在代码中，你可以找到张贴的文件：
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.
}
这篇关于如何在不点击的FileUpload控制器选择路径后，显示的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
