在 ASP.NET 中使用 jQuery AjaxForm 问题

发布于 2024-10-20 22:37:11 字数 2938 浏览 5 评论 0原文

我正在使用 jQuery AjaxForm 插件 创建图像的预览,用户选择加载到服务器。 我使用 Http 处理程序创建用于图像预览的临时图像文件。 为了响应 FileUpload 控件的客户端“onchange”事件,图像预览已成功创建。

我有一个按钮将整个表单(UploadImageToServerStep1.aspx)发送到服务器。在该按钮的服务器端 Click 事件中,我尝试将控件传输到另一个页面(UploadImageToServerStep1.aspx2),控件获取文件后面的其他页面代码(控件获取该页面 Page_Load 事件)但是页面不显示 - 而是再次显示引用页面(UploadImageToServerStep1.aspx)(控件不执行该页面的页面加载事件)。

UploadImageToServerStep1.aspx中的JS代码是: <脚本类型=“文本/javascript”>

变量预览 = { ImagePreview: 函数(imageId) {

    var formId = '<%= Form.ClientID %>';
    var fileUploadId = '<%= FileUpload1.UniqueID %>';
    var action = $('#' + formId).attr('action');
    var imageName = $("input[serverId = 'FileUpload1']").val();
    $('#' + formId).attr('action', './HttpHandlers/ImagesHandler.ashx?action=imagePreview&f=' + fileUploadId + '&i=' + imageName);
    $('#' + formId).ajaxForm(function() {
        $('#' + imageId).attr('src', './HttpHandlers/ImagesHandler.ashx?action=imagePreview&f=' + fileUploadId + '&i=' + imageName);
        $('#' + imageId).show();
        $('#' + formId).attr('action', action);
    });
    $('#' + formId).submit();
}

}; < /script>/

在 UploadImageToServerStep1.aspx.cs 中

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {

        FileUpload1.Attributes.Add("onchange", "preview.ImagePreview('htmlImgPreview');");
        FileUpload1.Attributes.Add("serverId", "FileUpload1");

    }
}


protected void btnNext_Click(object sender, EventArgs e)
{
    if (Page.IsValid)
    {
        Response.Redirect("UploadImageToServerStep2.aspx");
        //Server.Transfer("UploadImageToServerStep2.aspx");
     }
}

在 HttpHandler 中:

 case "imagePreview":
            string f = context.Request.QueryString.Get("f");
            string i = context.Request.QueryString.Get("i");

            const string uploadImageTempPath = "~/Images/TempImages/";
            if (!string.IsNullOrEmpty(context.Request.QueryString.Get("i")) && context.Request.Files[f] != null)
            {
                HttpPostedFile file = context.Request.Files[f];
                SaveImage(context, file, uploadImageTempPath, i);
            }
            context.Response.ContentType = GetContentType(context.Session["fileName"].ToString());

            if (context.Session["fileName"] == null || context.Request["i"] == null)
            {
                return;
            }

            byte[] byteArray1 =
                System.IO.File.ReadAllBytes(
                    context.Request.MapPath(string.Format("{0}{1}", uploadImageTempPath, context.Session["fileName"])));
            context.Response.BinaryWrite(byteArray1);
            break;

    }

有人可以写下该行为的原因是什么以及如何解决此问题

谢谢

I am using the jQuery AjaxForm plugin
to create an preview of an image I the user select to load to the server.
I use an Http Handler to create an temp image file that is used for the image preview.
In response to client side 'onchange' event of the FileUpload control the image preview is created successfully.

I have a button that sends the whole form (UploadImageToServerStep1.aspx) to the server. In the server side Click event of that button I try to transfer the control to another page (UploadImageToServerStep1.aspx2),the control gets to the other page code behind file(The control gets to that page Page_Load event) but the page is not displayed - instead the referring page is displayed(UploadImageToServerStep1.aspx)again (the control do not go the page load event of that page).

The JS code in UploadImageToServerStep1.aspx is :
< script type = "text/javascript" >

var preview = {
ImagePreview: function(imageId) {

    var formId = '<%= Form.ClientID %>';
    var fileUploadId = '<%= FileUpload1.UniqueID %>';
    var action = $('#' + formId).attr('action');
    var imageName = $("input[serverId = 'FileUpload1']").val();
    $('#' + formId).attr('action', './HttpHandlers/ImagesHandler.ashx?action=imagePreview&f=' + fileUploadId + '&i=' + imageName);
    $('#' + formId).ajaxForm(function() {
        $('#' + imageId).attr('src', './HttpHandlers/ImagesHandler.ashx?action=imagePreview&f=' + fileUploadId + '&i=' + imageName);
        $('#' + imageId).show();
        $('#' + formId).attr('action', action);
    });
    $('#' + formId).submit();
}

}; < /script>/

In UploadImageToServerStep1.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {

        FileUpload1.Attributes.Add("onchange", "preview.ImagePreview('htmlImgPreview');");
        FileUpload1.Attributes.Add("serverId", "FileUpload1");

    }
}


protected void btnNext_Click(object sender, EventArgs e)
{
    if (Page.IsValid)
    {
        Response.Redirect("UploadImageToServerStep2.aspx");
        //Server.Transfer("UploadImageToServerStep2.aspx");
     }
}

In the HttpHandler :

 case "imagePreview":
            string f = context.Request.QueryString.Get("f");
            string i = context.Request.QueryString.Get("i");

            const string uploadImageTempPath = "~/Images/TempImages/";
            if (!string.IsNullOrEmpty(context.Request.QueryString.Get("i")) && context.Request.Files[f] != null)
            {
                HttpPostedFile file = context.Request.Files[f];
                SaveImage(context, file, uploadImageTempPath, i);
            }
            context.Response.ContentType = GetContentType(context.Session["fileName"].ToString());

            if (context.Session["fileName"] == null || context.Request["i"] == null)
            {
                return;
            }

            byte[] byteArray1 =
                System.IO.File.ReadAllBytes(
                    context.Request.MapPath(string.Format("{0}{1}", uploadImageTempPath, context.Session["fileName"])));
            context.Response.BinaryWrite(byteArray1);
            break;

    }

Can someone please write what is the cause for that behavior and how can I solve this problem

Thanks

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

小姐丶请自重 2024-10-27 22:37:11

当尝试执行response.redirect 来响应ajax 调用时,浏览器的行为方式将与常规同步请求不同。但是,您可以获取响应并在 JS 端对其执行某些操作。我相信这会对你有所帮助。

返回重定向作为对 XHR 请求的响应

When trying to do a response.redirect in response to an ajax call, your browser is not going to behave in the same way it would with a regular synchronous request. You can however, take the response and do something with it on the JS side. I believe this will help you.

Returning redirect as response to XHR request

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文