首页 新闻 搜索 专区 学院

ASP.Net Mvc 中使用AjaxFileUpload上传图片成功但是返回的Json数据为空

0
悬赏园豆:100 [已解决问题] 解决于 2015-02-06 16:14

使用AjaxFileUpload.js上传文件,提交到action中,返回的Json数据,显示成功了,但是在js中,是空的。

请问这个大概是什么错误造成的,或是不是我写的代码细节没有处理好呢?

新手,求指教啊。。

cshtml:

 1         <div class="form-group" id="imageFrom">
 2             @Html.LabelFor(model => model.PhotoPath, htmlAttributes: new { @class = "control-label col-md-2" })
 3             <div class="col-md-10"> 
 4                 <input class="form-control" type="file" name="uploadImage" id="uploadImage" onchange="uploadImageFunc()" />
 5                 <input type="text" id="PhotoPath" name="PhotoPath" placeholder="" value="defaultPath"/>
 6                 <div>
 7                     <img src="" id="showPic"/>
 8                 </div>
 9             </div>
10         </div>

js:

 1 function uploadImageFunc() {
 2 
 3  $("#imageFrom").change(
 4      function(){
 5         // 获取文件路径
 6         var filePath = $("input[name='uploadImage']").val();
 7         // 获取“.”位置
 8         var extStart = filePath.lastIndexOf(".");
 9         // 获取文件格式后缀,并全部大写
10         var ext = filePath.substring(extStart, filePath.length).toUpperCase();
11 
12         // 判断文件格式
13         if (ext != ".BMP" && ext != ".PNG" && ext != ".JPG" && ext != ".JPEG") {
14             alert("图片仅限于.BMP .PNG .JPG .JPEG文件。");
15             return false;
16         }
17         else {
18             // 使用ajaxfileupload上传文件
19             $.ajaxFileUpload({
20                 url: "UploadImage",
21                 secureuri: false,
22                 fileElementId: 'uploadImage',
23                 dataType: 'JSON',
24                 data:{fileType:ext},
25                 success:
26                     function (data, status) {
27                         var obj = eval(data.imagePath);
28                         alert(obj);
29                         $("#uploadImage").hide();
30                         $("#PhotoPath").attr(value,data.imagePath).show();
31                         $("#showPic").attr(src, data.imagePath).show();
32                     },
33                 error:
34                     function (data, status, e){
35                         alert(data+","+status+","+e);
36                     }
37             });
38         }
39     });
40 }

action:

 1         [HttpPost]
 2         [ValidateInput(false)]
 3         public ActionResult UploadImage(HttpPostedFileBase uploadImage)
 4         {
 5             string fileType = Request.Form["fileType"];
 6             // 随机数
 7             var rand = new Random().Next(0, 8999);
 8 
 9             // 创建文件存放的文件路径,如果没有,创建该路径
10             string folder = HttpContext.Server.MapPath("~/Image/");
11             if (!Directory.Exists(folder))
12             {
13                 Directory.CreateDirectory(folder);
14             }
15 
16             // 保存文件
17             string filePath = Path.Combine(folder, rand + fileType);
18 
19             uploadImage.SaveAs(filePath);
20 
21             return Json(new { imagePath = filePath ,success = true});
22             //return Content(filePath);
23         }

下面是调试的时候的图:

 

js:

 

修改了success:

  function (data, status) {
                        alert(data);
                        $("#www").text(data["imagePath"]);
                    },

现在是要获取filePath。

现在的情况是,在success中提取imagePath对应的filePath内容,


{imagePath = F:\xxx\xxx\xxx.jpg }


现在已经可以获得data了。


但是使用$("#www").text(data.imagePath);


还是未定义。

 

我找到的解决办法。。

http://www.soaspx.com/dotnet/asp.net/DPattern/dpattern_20120507_9095.html

return Json(new { err = "", msg = "xxx.jpg" }, "text/x-json"); 需要给mvc中的json返回值指定contentType

Propro的主页 Propro | 初学一级 | 园豆:21
提问于:2015-02-06 09:49
< >
分享
最佳答案
0

Chrome F12看看到底响应了数据没。如果响应了数据,那么就是解析数据的问题。如果没数据或者是空白,那么找后台的问题。。解决问题的前提是准确判断问题的发生地。对于jsonString变对象,建议使用jquery的封装方法$.parseJSON(jsonString)。如果要用eval,那么请使用eval('(' + jsonString + ')')

收获园豆:25
幻天芒 | 高人七级 |园豆:36652 | 2015-02-06 13:25

好,等我试下

Propro | 园豆:21 (初学一级) | 2015-02-06 14:47

好了问题已解决,谢谢关注!

Propro | 园豆:21 (初学一级) | 2015-02-06 16:10

@Propro: 建议分享下原因。

幻天芒 | 园豆:36652 (高人七级) | 2015-02-07 09:45

@幻天芒: 在返回的json中指定返回类型contentType

就是把我的代码给改成return Json(new{imagePath = filePath},"text/x-json");这个样子就好了。。

Propro | 园豆:21 (初学一级) | 2015-02-07 11:04

@Propro: 使用Json本身就是json字符串了,居然还需要设置。我同样的传法,没遇到你的问题。

幻天芒 | 园豆:36652 (高人七级) | 2015-02-07 11:48
其他回答(5)
0

定义一个实体类:

var model= new AjaxStatusModel { status = 200, msg = "success", data = filePath };

return Json(model);

对了,后台UploadImage方法返回类型的应该是JsonResult

收获园豆:10
KingMi | 园豆:1108 (小虾三级) | 2015-02-06 10:20

好了问题已解决,谢谢关注!

支持(0) 反对(0) Propro | 园豆:21 (初学一级) | 2015-02-06 16:09
0

return Json那个地方,加上JsonRequestBehavior.AllowGet试试。

收获园豆:10
JeffWong | 园豆:2021 (老鸟四级) | 2015-02-06 10:41

这个试过了。没有什么影响

支持(0) 反对(0) Propro | 园豆:21 (初学一级) | 2015-02-06 11:38

@Propro: 晕 打开firebug或者fiddler跟踪下ajax响应是什么

支持(0) 反对(0) JeffWong | 园豆:2021 (老鸟四级) | 2015-02-06 11:49

@JeffWong: 

响应的正文是这个:

{ imagePath = F:\MyJCrop\MyJCrop\Image\5182.JPG }

支持(0) 反对(0) Propro | 园豆:21 (初学一级) | 2015-02-06 11:55

@JeffWong:好了问题已解决,谢谢关注!

支持(0) 反对(0) Propro | 园豆:21 (初学一级) | 2015-02-06 16:09
0

需要改造一下uploadHttpData方法

    uploadHttpData: function (r, type)
    {
        var data = !type;
        data = type == "xml" || data ? r.responseXML : r.responseText;

        // If the type is "script", eval it in global context
        if (type == "script")
            jQuery.globalEval(data);

        // Get the JavaScript object, if JSON is used.
        if (type == "json") {
            data = r.responseText;
            var start = data.indexOf(">");
            if (start != -1) {
                var end = data.indexOf("<", start + 1);
                if (end != -1) {
                    data = data.substring(start + 1, end);
                }
            }
            eval("data = " + data);
        }

        // evaluate scripts within html
        if (type == "html")
            jQuery("<div>").html(data).evalScripts();

        return data;
    }
收获园豆:10
Y2zz | 园豆:393 (菜鸟二级) | 2015-02-06 11:28

现在的情况是,在success中提取imagePath对应的filePath内容,

{imagePath = F:\xxx\xxx\xxx.jpg }

现在已经可以获得data了。

但是使用$("#www").text(data.imagePath);

还是未定义。

支持(0) 反对(0) Propro | 园豆:21 (初学一级) | 2015-02-06 11:41

@Propro: {imagePath = F:\xxx\xxx\xxx.jpg } 这样的格式怎么来的? json是无法解析的,不是有效的格式

支持(0) 反对(0) Y2zz | 园豆:393 (菜鸟二级) | 2015-02-06 13:49

@Y2zz: 嗯嗯,我想我明白一些了。

支持(0) 反对(0) Propro | 园豆:21 (初学一级) | 2015-02-06 14:46

@Y2zz: 好了问题已解决,谢谢关注!

支持(0) 反对(0) Propro | 园豆:21 (初学一级) | 2015-02-06 16:09
0

不好意思,不是你的操作问题,是我自己把答案删除了,因为MVC我不熟悉,我提供的方法是传统的前后台交互,上网查了下资料,你的写法应该是没问题,但是我不知道你具体的问题在哪里。所以我把答案删除了。

你现在碰到的undefine 应该是eval的问题 ,提供下你的data给我看看

收获园豆:20
nicky0227 | 园豆:1069 (小虾三级) | 2015-02-06 11:40

好吧,但是我确实改成这样,就给传过去了。。

        public void UploadImage(HttpPostedFileBase uploadImage)
        {
            string fileType = Request.Form["fileType"];
            // 随机数
            var rand = new Random().Next(0, 8999);

            // 创建文件存放的文件路径,如果没有,创建该路径
            string folder = HttpContext.Server.MapPath("~/Image/");
            if (!Directory.Exists(folder))
            {
                Directory.CreateDirectory(folder);
            }

            // 保存文件
            string filePath = Path.Combine(folder, rand + fileType);

            uploadImage.SaveAs(filePath);

            Response.Clear();
            Response.Write(new { imagePath = filePath });
            Response.End();
            //return Json(new { imagePath = filePath ,success = true});
            //return Content(filePath);
        }

然后alert(data) 的值是

{imagePath = F:\xxx\xxx\xxx.jpg }

支持(0) 反对(0) Propro | 园豆:21 (初学一级) | 2015-02-06 11:44

@Propro: 你在后台把data拼接成这个样子:{"imagePath":"F:\\xxx\\xxx\\xxx.jpg "}

然后在前台取值这么取:

var obj = eval("(" + data + ")");

obj.imagePath 就是值

 

json格式是用":"号来区分键和值的,不能用"="号 估计在MVC下 Json(new { imagePath = filePath ,success = true})这种写法可能把这个过程封装了

支持(0) 反对(0) nicky0227 | 园豆:1069 (小虾三级) | 2015-02-06 11:47

@nicky0227: 嗯嗯,应该是格式的问题。等我试下

支持(0) 反对(0) Propro | 园豆:21 (初学一级) | 2015-02-06 14:47

@nicky0227: 好了问题已解决,谢谢关注!

支持(0) 反对(0) Propro | 园豆:21 (初学一级) | 2015-02-06 16:10
0

这样返回

string res = "{  \"imagePath\":\"" + filePath.Replace(@"\",@"\\") + "\"}";

return Content(res);

 

然后这样处理 data

 

 var obj= $.parseJSON(data);

收获园豆:25
Yu | 园豆:12944 (专家六级) | 2015-02-06 12:53

嗯嗯,我试一下

支持(0) 反对(0) Propro | 园豆:21 (初学一级) | 2015-02-06 14:47

好了问题已解决,谢谢关注!

支持(0) 反对(0) Propro | 园豆:21 (初学一级) | 2015-02-06 16:10
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册