通过jquery实现异步上传时总是提示parsererror，请问应该怎么解决
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了通过jquery实现异步上传时总是提示parsererror，请问应该怎么解决相关的知识，希望对你有一定的参考价值。
我用cakephp搭了一个类似贴吧的聊天服务器，新加了一个上传图片的功能，目前图片上传成功，但是却一直提示这个错误，不知道是怎么回事，希望有高手能帮忙解决一下。
下面是jquery的测试代码。
$(function ()
$("#fileupload").wrap("<form id='myupload' action='/account/qacenter/post_images' method='post' enctype='multipart/form-data'></form>");
$("#fileupload").change(function()
$("#myupload").ajaxSubmit(
dataType: "json",
type: "POST",
timeout: 30000,
beforeSend: function()
,
uploadProgress: function(event, position, total, percentComplete)
,
success: function(data)
,
complete: function(xhr,msg)
,
error: function(XMLHttpRequest, textStatus, errorThrown)
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState);
alert(textStatus);
);
);
);
下面是cakephp的控制器代码
function post_images()
$this->autoRender=false;
$uptypes=array(
'.JPG',
'.JPEG',
'.PNG',
'.PJPEG',
'.GIF',
'.BMP',
'.X-PNG'
);
$picname = $_FILES['image_uploader']['name'];
$picsize = $_FILES['image_uploader']['size'];
if ($picname != "")
if ($picsize > 1024000)
echo "图片大小不能超过1M";
exit;
$type = strtoupper(strstr($picname, '.'));
if (!in_array($type, $uptypes))
echo "图片格式不对";
exit;
$rand = rand(100, 999);
$pics = date("YmdHis") . $rand . $type;
//上传路径
$pic_path = "C:/xampp/htdocs/youyisi/webroot/files/". $pics;
move_uploaded_file($_FILES['image_uploader']['tmp_name'], $pic_path);
$size = round($picsize/1024,2);
$arr = array(
'name'=>$picname,
'pic'=>$pics,
'size'=>$size
);
echo json_encode($arr);
jquery返回的是 200 4 parsererror，在网上找了很久，不知道该怎么处理，jquery新手，还望指教。后面那个errorThrown提示信息是 SyntaxError:Unexpected token <
我改成GET看不到提交的URL，因为用了框架的原因，只会向那个action跳转。。
追答抱歉看错了，我以为是普通POST，没注意是上传文件 ，
实在不行，换个办法用 提交到隐藏的iframe
不好意思，我不懂唉。。
追答对了，你上传的文件是不是中文名？
$arr = array(
'name'=>$picname,
'pic'=>$pics,
'size'=>$size
);
echo json_encode($arr);
谢谢，我找到办法解决了，把上面的dataType改成text，data改成“” 就好了。
追答学习了
本回答被提问者采纳MVC中通过jquery实现图片预览上传，并对文件类型大小进行判断（极简）
一、易出错问题重要提示
当直接通过提交表单数据上传文件时，文件上传控件input一定要添加name属性，并且不同的控件也要设置不同的name属性值，否则会导致控制器中的Request.Files方法获取上传文件失败。估计Request.Files方法是通过input控件的name属性来识别并区别上传文件的。
二、动态增减上传控件，多文件上传
视图代码
@Layout=null;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MVC+jquery</title>
<script src="~/Scripts/jquery.min.js"></script>
<script>
$(function()
var nameId=0; //标识文件上传控件name属性值序列
$("#AddInput").click(function()
//动态增减文件上传控件
//上件上传input控件必须要添加name属性，不同控件的name值不能相同，否则会导致控件器中Request.Files方法获取上传文件失败。
$("#FileControls").append("<p><input type='button' value='-' onclick=$(this).closest('p').remove() /> <input type='file' name='file"+toString(++nameId)+"' /></p>");
//对文件上传控件添加onchange事件，验证文件类型、大小，并对符合要求的图片进行预览显示
$("#FileControls :file").change(function()
if($(this).val()=="") return; //如果未选择文件则跳过不检查
//检测选择文件的类型，清除不符合类型要求的文件
if(!/(jpg|png|gif|jpeg)$/i.test($(this).val()))
alert("请上传jpg、png、gif类型的图片文件！");
$(this).val(""); //清除不符合类型要求的文件
return;
//检测文件的大小，清除不符合类型要求的文件
if(this.files[0].size>500*1024) //500*1024为500K
alert("文件太大，请重新选择！");
$(this).val("");
return;
//这里的createObjectURL方法是针对chrome核心的浏览器，其它核心自行百度
var url=window.webkitURL.createObjectURL(this.files[0]);
$("#ImagePreview").attr("src",url);
$("#ImagePreview").css("display","block");
);
);
$("#AddInput").click(); //向页面添加一个文件上传控件
);
</script>
</head>
<body>
<form action="~/FileUpload/UploadSubmit" method="post" enctype="multipart/form-data">
<div id="FileControls">
<div>上传文件 <input type="button" style="width:80px;" id="AddInput" value="+" /></div>
</div>
<div><img id="ImagePreview" style="display:none;width:300px;border:1px;" onclick="this.style.display='none';" /></div>
<input type="submit" value="直接提交表单数据上传" />
</form>
</body>
</html>控制器代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace XLZXXX.Controllers
public class FileUploadController : Controller
public ActionResult FileUploadSubmit()
return View();
public string UploadSubmit()
HttpFileCollectionBase files = Request.Files;
int fileCount = 0; //统计上传成功的文件个数
for(int i = 0;i<files.Count;i++)
//跳过未选拔文件的input控件
if(files[i]==null||files[i].ContentLength==0) continue;
//上传文件，文件名与上传文件的文件名同名。也可以用Guid.NewGuid().ToString("N")全局唯一标识符来命名文件名
files[i].SaveAs(Server.MapPath("~/upload/"+files[i].FileName));
fileCount++;
return string.Format("【0】个文件上传成功",fileCount);
三、通过juqery的$.ajax异步上传
视图代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MVC+jquery</title>
<script src="~/Scripts/jquery.min.js"></script>
<script>
$(function()
//上传文件按钮的click事件
$("#btnSubmit").click(function()
var hasFile=false; //设置变量，记录是否选择文件
var form=new FormData();
//遍历文件上传控件，并将文件信息写入FormData对象
$("#FileControls :file").each(function()
if($(this).val()!="")
//使用append方法将文件信息写入FormData对象，HTML代码中文件上传控件input可以无name属性，
form.append("file",$(this)[0].files[0]);
hasFile=true;
);
//如果一个文件都没有选择则跳出此函数
if(!hasFile)
alert("请至少选择一个上传的文件。"); return;
//上传文件，并返回以“,”连接的文件名，成功后返回文件名值、清空文件上传控件内容
$.ajax(
url: "UploadAjax",type: "post",async: true,processData: false,contentType: false,
data: form,
success: function(data)
alert(data+"上传成功");
$("#FileControls :file").val("");
$("#lblFiles").text(data);
,
);
);
);
</script>
</head>
<body>
<p>文件：<label id="lblFiles"></label></p>
<div id="FileControls">
<p><input type="file" /></p>
<p><input type="file" /></p>
</div>
<p><input type="button" id="btnSubmit" value="通过ajax上传文件并提交表单" /></p>
</body>
</html>控制器代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace XLZXXX.Controllers
public class FileUploadController : Controller
public ActionResult FileUploadAjax()
return View();
//这是query的ajax调用的函数
public string UploadAjax()
HttpFileCollectionBase files = Request.Files;
//用List记录上传文件的文件名
List<string> filesStr = new List<string>();
for(int i = 0;i<files.Count;i++)
files[i].SaveAs(Server.MapPath("~/upload/"+files[i].FileName));
filesStr.Add(files[i].FileName);
return string.Join(",",filesStr.ToArray());
四、单文件上传（无js代码）
视图代码
@Layout=null;
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MVC+jquery</title>
</head>
<body>
<form action="~/FileUpload/UploadSingle" method="post" enctype="multipart/form-data">
<p><input type="file" name="inputName" /></p>
<input type="submit" value="单个文件上传" />
</form>
</body>
</html>控制器代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace XLZXXX.Controllers
public class FileUploadController : Controller
public ActionResult FileUploadSingle()
return View();
public string UploadSingle(HttpPostedFileBase inputName) //这里的参数名inputName一定要和视图里input文件上传控件的name属性值相同
if(inputName==null) return "没有选择文件";
inputName.SaveAs(Server.MapPath("~/upload/"+inputName.FileName));
return "文件上传成功";
以上是关于通过jquery实现异步上传时总是提示parsererror，请问应该怎么解决的主要内容，如果未能解决你的问题，请参考以下文章