如何使用Jquery AjaxUpload解析JsonResult

时间:2011-06-27 06:31:21

标签: asp.net json jquery

以下上传图片代码

 <a id="addImage" href="javascript:;">Add Image</a>

使用Javascript:

$().ready(function () {
            var counter = 0;
            $(function () {
                var btnUpload = $('#addImage');
                new AjaxUpload(btnUpload, {
                    action: 'saveupload.aspx',
                    name: 'uploadimage',
                    dataType: 'json',
                    onSubmit: function (file, ext) {
                        $("#loading").show();
                    },
                    onComplete: function (file, response) {
                        alert(response);
                        var uploadedfile = "UserData/" + file;
                        $("#uploadImageWrapper").append("
            <div class='imageContainer offset'  id='current" + counter + "'>
            <img height='65px' width='65px' src='" + uploadedfile + "' alt='" + uploadedfile + "'/></div>");
                        $('#current' + counter).fadeIn('slow', function () {
                            $("#loading").hide();
                            $("#message").show();
                            $("#message").html("Added successfully!");
                            $("#message").fadeOut(3000);
                            counter++;
                        });
                    }
                });
            });
        });

服务器代码:(saveupload.aspx.cs)

protected void Page_Load(object sender, EventArgs e)
    {
        HttpFileCollection uploadedFiles = Request.Files;
        int i = 0;
        string width = "0";
        string height = "0";
        if (uploadedFiles.Count > 0)
        {
            while (!(i == uploadedFiles.Count))
            {
                HttpPostedFile userPostedFile = uploadedFiles[i];
                if (userPostedFile.ContentLength > 0)
                {
                    string filename = userPostedFile.FileName.Substring(userPostedFile.FileName.LastIndexOf("\\") + 1);
                    userPostedFile.SaveAs(Path.Combine(Server.MapPath("UserData"), filename));
                    Bitmap img = new Bitmap(Path.Combine(Server.MapPath("UserData"), filename));
                    width = img.Width.ToString();
                    height = img.Height.ToString();
                }
                i += 1;
            }
        }
    //I would like to return Uploaded image Height and Width
        Response.Write(@"{Width:" + width + ", Height:" + height + "}");
    }

并且返回 JsonResult 是我在Alert消息中显示的。 enter image description here

问题: 我无法得到响应。宽度和响应。高度。

1 个答案:

答案 0 :(得分:1)

首先,我建议您清理 saveupload.aspx 的HTML。你不需要它,它会污染你的反应。 你只需要:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="saveupload.aspx.cs" Inherits="WebApplication1.saveupload" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

另一件事;当你在脚本中得到回复时,可以使用parseJSON,如下所示:

var obj = jQuery.parseJSON(response);

现在您应该可以访问宽度和高度:

obj.Width 

最后一件事。 Valums的Ajax Uploader已被作者用新组件取代。 你可以找到它here 它非常相似,但他仍在更新这个项目,所以你可能会考虑转换。

<强>更新

我建议的另一件事是使用jSon序列化程序(System.Web.Script.Serialization)来序列化您想要返回的流:

var jSon = new JavaScriptSerializer();
var OutPut = jSon.Serialize(myClass);
Response.Write(OutPut);