Question

我需要使用Ajax以3个步骤将头像上传到服务器：

选择要上传的文件。
使用jquery.Jcrop.js选择裁剪区域。
创建头像并将其保存到数据库。

我已经创建了一个用户控件来实现它。因此，用户单击上传按钮，并且有一个modalPopUpExtender显示对话框，用户必须选择要上传的文件（使用AjaxToolKit文件异步上传器），文件上传后第二个PopUp扩展器必须在另一个对话框中显示上传的图像让用户选择要裁剪的矩形。最后一步（按钮单击“创建”）是裁剪图像并在父页面中显示它。我迈出了第一步的成功。但我无法使上传的图像显示在第二个对话框中。

所以这是我完整的ascx文件及其代码：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Avatar.ascx.cs" Inherits="KR.Trivital.Web.UI.Controls.Avatar" %>
<script type="text/javascript">
    window.onload = function () { $addHandler($get('ctl00_CntAvatarBox_ImgButtAvatarImage'), 'click', showOverlay); }

     function showOverlay() {
           var bid = $find('mpeBehaviorID');
           bid.show();
       }

       function uploadComplete(sender, args) {
           var bid = $find('mpeBehaviorID');
           bid.hide();
           var bid2 = $find('ModalPopupExtender1BehaviorID');
           bid2.show();

       }
</script> 

    <asp:UpdatePanel runat="server" ID="UpdPan">
            <ContentTemplate>



        <asp:Image runat="server" ID="ImgAvatarImage" Visible="false" />
        <asp:ImageButton  runat="server" ID="ImgButtAvatarImage" Visible="false" OnClientClick="return false;" />

        <asp:Panel ID="panPopupUpload" runat="server" CssClass="popUpDetails" Width="550" Style="display: none">
            <h2 class="popPanelH2"><asp:Literal runat="server" ID="ltrUploadHeader" Text="Загрузка аватара" /></h2>
            <div style="background-color: Gray; padding: 20px;">
                <asp:Button ID="btnShowPopupUpload" runat="server" Style="display: none" />
                <asp:Button ID="btnCancelPopupUpload" runat="server" Style="display: none" />
                <ajaxToolkit:ModalPopupExtender ID="mdlPopupUpload" runat="server" TargetControlID="btnShowPopupUpload"
                    PopupControlID="panPopupUpload" CancelControlID="btnCancelPopupUpload" BackgroundCssClass="modalBackground"
                    BehaviorID="mpeBehaviorID" />

                    <ajaxToolkit:AsyncFileUpload runat="server" ID="AsncUpload1" OnUploadedComplete="AsncUpload1_UploadedComplete" 
                    OnClientUploadComplete="uploadComplete" />


            </div>
        </asp:Panel>
        <asp:Panel ID="panPopupCropper" runat="server" CssClass="popUpDetails" Width="550" Style="display: none">
            <h2 class="popPanelH2"><asp:Literal runat="server" ID="Literal1" Text="Выбор обрезного формата" /></h2>
            <div style="background-color: Gray; padding: 20px;">
                <asp:Button ID="Button1" runat="server" Style="display: none" />
                <asp:Button ID="Button2" runat="server" Style="display: none" />
                <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1"
                    PopupControlID="panPopupCropper" CancelControlID="Button2" BackgroundCssClass="modalBackground"
                    BehaviorID="ModalPopupExtender1BehaviorID" />

                    <img runat="server" id="Img1" alt="" />


            </div>
        </asp:Panel>

        </ContentTemplate>
        </asp:UpdatePanel>

代码隐藏：

using System;
using KR.Trivital.Web.Core;
using KR.Trivital.Business.Users;
using System.Web;
using System.Drawing.Drawing2D;
using System.IO;
using System.Web.UI.WebControls;
using System.Text;
using System.Web.UI;

namespace KR.Trivital.Web.UI.Controls
{
    public partial class Avatar : SharedBaseControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Visible = Page.User.Identity.IsAuthenticated;

            var avatar = UserAvatarBO.Get(CurrentUserId);
            if (avatar != null)
            {
                ImgAvatarImage.ImageUrl = avatar.ImagePath;
                ImgAvatarImage.Visible = true;
            }
            else
            {
                ImgButtAvatarImage.Visible = true;
            }


        }

        protected void lnkButtUpload_Click(object sender, EventArgs e)
        { 
            // Показать панель загрузки
            mdlPopupUpload.Show();

        }

        private AvatarUploader InitializeAvatarUploader()
        {
            var uploader = new AvatarUploader();

            uploader.SmoothingMode = SmoothingMode.HighQuality;
            uploader.OffSetMode = PixelOffsetMode.HighQuality;
            uploader.ResizingInterpolationMode = InterpolationMode.HighQualityBicubic;
            uploader.ThumbMaxHeight = SiteConfig.UserAvatarsSettings.AvatarHeight;
            uploader.ThumbMaxWidth = SiteConfig.UserAvatarsSettings.AvatarWidth;
            uploader.IntermidiaMaxHeight = SiteConfig.UserAvatarsSettings.UploadHeight;
            uploader.IntermidiaMaxWidth = SiteConfig.UserAvatarsSettings.UploadWidth;
            uploader.JpgQuality = SiteConfig.UserAvatarsSettings.AvatarQuality;
            uploader.UploadFolder = SiteConfig.UserAvatarsSettings.UploadFolder + "/" + this.Page.User.Identity.Name;

            return uploader;
        }

        protected void AsncUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
        {
            var uploader = InitializeAvatarUploader();
            string returnPath = "";
            uploader.UploadImage(AsncUpload1.FileContent, AsncUpload1.FileName, ref returnPath);



            Img1.Src = "~/" + returnPath;
        }


    }
}

Answer 1

这是一个“创造性的解决方案”，但确实有效它使用您正在使用的AsyncFileUpload的OnClientUploadComplete以及页面上的Control，它将触发UpdatePanel上的更新（例如，按钮;如果您愿意，可以显示：false）。

function uploadComplete(sender, args) {
    // Your code
    __doPostBack('<%= UpdatePanelUpdatingControl.UniqueID %>', '');
}

如何在AsyncFileUploader的OnUploadedComplete事件上更新UpdatePanel？

1 个答案: