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
最佳答案
0
Chrome F12看看到底响应了数据没。如果响应了数据，那么就是解析数据的问题。如果没数据或者是空白，那么找后台的问题。。解决问题的前提是准确判断问题的发生地。对于jsonString变对象，建议使用jquery的封装方法$.parseJSON(jsonString)。如果要用eval,那么请使用eval('(' + jsonString + ')')
收获园豆：25
好，等我试下
好了问题已解决，谢谢关注！
@Propro: 建议分享下原因。
@幻天芒: 在返回的json中指定返回类型contentType
就是把我的代码给改成return Json(new{imagePath = filePath},"text/x-json");这个样子就好了。。
@Propro: 使用Json本身就是json字符串了，居然还需要设置。我同样的传法，没遇到你的问题。
其他回答(5)
0
定义一个实体类：
var model= new AjaxStatusModel { status = 200, msg = "success", data = filePath };
return Json(model);
对了，后台UploadImage方法返回类型的应该是JsonResult
收获园豆：10
好了问题已解决，谢谢关注！
0
return Json那个地方，加上JsonRequestBehavior.AllowGet试试。
收获园豆：10
这个试过了。没有什么影响
@Propro: 晕 打开firebug或者fiddler跟踪下ajax响应是什么
@JeffWong:
响应的正文是这个：
{ imagePath = F:\MyJCrop\MyJCrop\Image\5182.JPG }
@JeffWong：好了问题已解决，谢谢关注！
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
现在的情况是，在success中提取imagePath对应的filePath内容，
{imagePath = F:\xxx\xxx\xxx.jpg }
现在已经可以获得data了。
但是使用$("#www").text(data.imagePath);
还是未定义。
@Propro: {imagePath = F:\xxx\xxx\xxx.jpg } 这样的格式怎么来的？ json是无法解析的，不是有效的格式
@Y2zz: 嗯嗯，我想我明白一些了。
@Y2zz: 好了问题已解决，谢谢关注！
0
不好意思，不是你的操作问题，是我自己把答案删除了，因为MVC我不熟悉，我提供的方法是传统的前后台交互，上网查了下资料，你的写法应该是没问题，但是我不知道你具体的问题在哪里。所以我把答案删除了。
你现在碰到的undefine 应该是eval的问题 ，提供下你的data给我看看
收获园豆：20
好吧，但是我确实改成这样，就给传过去了。。
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 }
@Propro: 你在后台把data拼接成这个样子:{"imagePath":"F:\\xxx\\xxx\\xxx.jpg "}
然后在前台取值这么取：
var obj = eval("(" + data + ")");
obj.imagePath 就是值
json格式是用":"号来区分键和值的，不能用"="号 估计在MVC下 Json(new { imagePath = filePath ,success = true})这种写法可能把这个过程封装了
@nicky0227: 嗯嗯，应该是格式的问题。等我试下
@nicky0227: 好了问题已解决，谢谢关注！
0
这样返回
string res = "{ \"imagePath\":\"" + filePath.Replace(@"\",@"\\") + "\"}";
return Content(res);
然后这样处理 data
var obj= $.parseJSON(data);
收获园豆：25
嗯嗯，我试一下
好了问题已解决，谢谢关注！
