开发环境:
后台: SpringMVC,前端: ajax、fileupload插件
问题点一:上传文件后,无任何错误,但页面自动刷新
问题点定位:检查调用fileupload方法时,所在按钮类型是否设置为 type=“submit”,如果是,则会引起上传数据正常情况下,自动刷新页面,将按钮类型修改为type=“button” 即可正常执行
附楼主源代码如下:
前端代码(部分):
<form method="POST" enctype="multipart/form-data" id="fileUploadForm">
<div class="modal-body" >
<input id='parkid' name='parkid' value='$(parkid)' type='hidden'>
<input type="file" name="fileupdate" id="fileupdate" class="file" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" onclick="autoCheckInSubmit()">上传云端识别</button>
</div>
</form>
此处为JS代码:
function autoCheckInSubmit(){
debugger;
var parkid=$("#parkid").val();
console.log("获取到的parkid="+parkid);
$.ajaxFileUpload({
type:'post',
url:'${APP_PATH }/update/fileUpload',
data:{id:parkid},
secureuri : false,
fileElementId:'fileupdate',
dataType: 'json',//服务器返回的格式
// async : false,
contentType:'application/x-www-form-urlencoded',
success:function(data,status){
if(data.code==100)
{
alert("车牌识别成功!识别车号为:"+data.extend.vb_msg);
$("#myModal").modal('hide');
$("#parkInfo").attr("href","${APP_PATH }/index/findAllCar");
$("#parkInfo").click();
}else{
alert(data.extend.va_msg);
}
}
})
}
问题点二:使用fileupload插件上传数据后,回调不走sucess方法
排错思路:在所执行方法处,添加debugger;断点,以及是否进入后台执行,如果皆没有问题,请查看response方法中是否返回json字符串
如果类型不符,将无法执行success方法。
解决方案: 此类情况需修改fileupload.js方法,因源码中json类型数据会被拼接 “</pre》标签,因此,修改如下:
即可解决。