用户选择后如何显示图片

时间:2014-12-23 14:58:46

标签: c# asp.net ajaxcontroltoolkit

我的问题是我希望在用户选择图像后进行图像预览, 但遗憾的是没有发生任何事情。我不明白为什么。 任何人都可以帮助我吗?

这是我的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);
        }

    }

1 个答案:

答案 0 :(得分:0)

确保您的图片位于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();
    }
}