如何在用户选择后显示图片

本文关键字：显示图 选择 用户 | 更新日期: 2023-09-27 18:35:17

我的问题是我想在用户选择一个图像后获得图像的预览，但不幸的是，什么都没有发生。我不明白为什么。谁能帮我？

这是我的aspx：

<div class="container-fluid">
    <div class="row-fluid">
        <div class="btn-toolbar">
            <asp:Button runat="server" CssClass="btn btn-primary" ID="OK_btn" Text="OK" OnClick="OK_btn_Click" />
            <asp:LinkButton PostBackUrl="ClientMembershipDetailList.aspx"
                OnClientClick="return blockConfirm('Are you sure you want to cancel?', event, '')"
                CausesValidation="false"
                runat="server" CssClass="btn btn-primary" ID="Cancel_btn" Text="Cancel" />
        </div>
    </div>
    <div class="well tab-primary ui-tabs">
        <ul class="nav nav-tabs ui-tabs-nav">
            <li class="active"><a href="#home" data-toggle="tab">Member Details</a></li>
            <li><a href="#Dependants" data-toggle="tab">Dependants</a></li>
            <li><a href="#MedicalHistory" data-toggle="tab">Medical History</a></li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane active in" id="home">
                <div class="span6">
                    <div class="form-horizontal">
                        <div class="control-group">
                            <label class="control-label">Client:</label>
                            <div class="controls with-tooltip">
                                <asp:HiddenField runat="server" ID="ID_txt" />
                                <asp:TextBox runat="server" CssClass="input-large" ID="ClientID_Txt" Enabled="false" />
                            </div>
                        </div>
                        <asp:ScriptManagerProx ID="ScriptManager1" runat="server" />
                        <div class="control-group">
                            <label class="control-label">Picture</label>
                            <div class="controls with-tooltip">
                                <asp:HiddenField runat="server" ID="Picture_Txt" />
                                <asp:Image runat="server" Width="100" ImageUrl="~/Images/Pictures/PictureNA.jpg"
                                    Height="120" ID="Picture_Img" />
                                <asp:AsyncFileUpload ID="AsyncFileUpload1" runat="server" OnUploadedComplete="AsyncFileUpload1_UploadedComplete"
                                    UploadingBackColor="SteelBlue" />
                                <%--<asp:FileUpload runat="server" ID="PictureFileUpload" />--%>
                            </div>
                        </div>

这是ASPX.cs， 

    protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
    {
        System.Threading.Thread.Sleep(5000);
        if (AsyncFileUpload1.HasFile)
        {
            string fileName = Server.MapPath("Images/") + Guid.NewGuid().ToString();
            AsyncFileUpload1.SaveAs(fileName);
        }
    }

如何在用户选择后显示图片

确保您的图像位于 Ajax UpdatePanel 中，然后在UploadedComplete句柄中将图像源设置为该上传的图像。

为此，您需要将图像保存在网站的公共可见位置。例：

protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
    if (AsyncFileUpload1.HasFile)
    {
        string fileName = Server.MapPath("Images/") + Guid.NewGuid().ToString();
        AsyncFileUpload1.SaveAs(fileName);
        Picture_Img.ImageUrl = "~/Images" + Guid.NewGuid().ToString();
    }
}
相关文章：