c# - ファンシーボックスでファイルアップロードを使用すると、画像の拡張子が失われます

Question

こんにちは、fancybox 内に fileupload を実装しようとしています。より具体的には、ユーザーがスタックオーバーフローと同じように画像をアップロードすることを望んでいます。

問題 :ファンシーボックス内の写真をアップロードすると、画像の拡張子が失われます。ただし、fancybox 効果なしで同じことを行うと、送信と取得が成功します。

aspx コード:

<div class="poc1">
        <asp:Image ID="Image1" runat="server" />
        <div class="changePic">

        <a class="fancybox" href="#shadow"> Change Pic </a>
       </div>
       </div>

        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        <br /><br />
        <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
        <br />


   <div id="shadow" style="display:none;width:300px;">

    <asp:FileUpload ID="FileUpload1" runat="server" />
    <br /><br />
    <asp:Button ID="Button1" runat="server" Text="Upload" onclick="Button1_Click" />
    <br /><br /> 
    </div>

jquery:

<script type="text/javascript">
        $(".fancybox").fancybox({
        parent: "form:first",

        openEffect  : 'none',
        closeEffect : 'none',
        afterLoad   : function() {
        this.content = this.content.html();
        }
        });
        </script>

aspx.cs cdode :

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls;

using System.Data.SqlClient; using System.Configuration; using System.Web.Security;

using System.IO;

public partial class Default3 : System.Web.UI.Page {
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button1_Click(object sender, EventArgs e)
    {

        string virtualFolder = "~/UserPics/";
        string physicalFolder = Server.MapPath(virtualFolder);
        string connectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
        SqlConnection myConnection = new SqlConnection(connectionString);

        MembershipUser currentUser = Membership.GetUser();
        Guid currentUserId = (Guid)currentUser.ProviderUserKey;

        //save old pic vlaue in string
        SqlCommand cmdSelect = new SqlCommand("SELECT [UserPicUrl] FROM [UserDetails] WHERE ([UserId] = @UserId)", myConnection);
        cmdSelect.Parameters.AddWithValue("@UserId", currentUserId);
        myConnection.Open();
        string oldPicUrl = (string)(cmdSelect.ExecuteScalar());
        string oldPic = Server.MapPath(oldPicUrl);
        Label1.Text = "old Pic :- " + oldPic;


        //save new pic
        string fileName = Guid.NewGuid().ToString();
        string extension = System.IO.Path.GetExtension(FileUpload1.FileName);
        FileUpload1.SaveAs(System.IO.Path.Combine(physicalFolder, fileName + extension));
        String ImageUrl = virtualFolder + fileName + extension;
        Label2.Text = "New Pic :- " + ImageUrl;
        Image1.ImageUrl = ImageUrl;


        //update new pic in db
        SqlCommand cmdUpdate = new SqlCommand("UPDATE [UserDetails] SET [UserPicUrl] = @UserPicUrl WHERE [UserId] = @UserId", myConnection);
        cmdUpdate.Parameters.AddWithValue("@UserId", currentUserId);
        cmdUpdate.Parameters.AddWithValue("@UserPicUrl", ImageUrl);

        //delete old pic
        cmdUpdate.ExecuteNonQuery();
        myConnection.Close();
        myConnection.Dispose();
        File.Delete(oldPic);


    } }

私が間違っているところに光を当ててください。あまりにも多くの作業をしましたが、解決策が見つかりません。または、ファイルアップロード条件の周りにライトボックス効果を持たせる他の簡単な方法はありますか?