<table id="deploy_application" class="bordered-table">
<tr>
<td id="application_file">
<input id="file_field" type="file" name="application" size="20" />
</td>
<td id="application_submit">
<input id="submit_button" type="submit" value="Upload" onclick="uploadFile()" />
</td>
</tr>
</table>
最近在使用ajaxFileUpload插件做文件上传时,后端返回json格式的数据,js代码如下:
function ajaxFileUpload() {
$.ajaxFileUpload
(
{
url: '/upload',
secureuri: false,
fileElementId: 'file_field',
dataType: 'json', //这里选择了json
success: function (data, status) {
alert(data);
},
error: function (data, status, e) {
alert(e);
}
}
)
}
结果在chrome和FireFox浏览器出现如下错误:
先在网上找了下解决办法,stackoverflow上有说修改ajaxFileUpload源码的方法,试了下,不能用,问题依旧,只能自己排查下原因了。从错误提示上看有点像是json数据中出现了<(尖括号),为了看到json数据,将js修改如下:
function ajaxFileUpload() {
$.ajaxFileUpload
(
{
url: '/upload',
secureuri: false,
fileElementId: 'file_field',
dataType: 'content', //这里修改为content
success: function (data, status) {
alert(data);
},
error: function (data, status, e) {
alert(e);
}
}
)
}
结果返回的json数据如猜测,json数据被包含在一个<pre></pre>的标签中,如下图:
网上查了下原因,是因为Server端的Response上加上了contentType="application/json"。但有时后端这么做是必须的,所以修改ajaxFileUpload源码,将<pre></pre>标签去掉,如下:
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;
}
至此,大工告成,ajaxFileUpload的dataType正常使用json。
P.S. 后端使用Spring MVC 3,采用rest风格
- 大小: 6.9 KB
- 大小: 12.8 KB
分享到:
相关推荐
NULL 博文链接:https://wangjinlongaisong-126-com.iteye.com/blog/2256622
AJAXFileUpload ajax 异步文件上传 进度条AJAXFileUpload ajax 异步文件上传 进度条
在后台加上即可解决IE9,firefox下面的问题: HttpServletResponse response =ServletActionContext.getResponse(); response.setContentType("text/html");
ajaxFileUpload 文件上传
ajaxfileupload多文件上传,ajaxfileupload多文件上传,ajaxfileupload多文件上传,ajaxfileupload多文件上传
ajaxFileUpload 博文链接:https://raising.iteye.com/blog/2233668
通过ajaxfileupload实现JS的文件上传
ajaxfileupload.js用于文件上传
此为前端进行文件上传,使用Ajax方式提交的js插件,使用方便简洁,开发很高效。
ajaxfileupload.js 这是个非常好的异步上传图片的插件,来解决form表单上传时要刷新页面的问题。支持多文件上传
修改ajaxfileupload.js 文件,实现ajaxfileupload文件上传进度条
ajaxFileUpload上传文件,ajaxFileUpload上传文件,ajaxFileUpload上传文件,ajaxFileUpload上传文件,ajaxFileUpload上传文件
jquery+ajaxfileupload+html文件上传,用ajaxfileupload插件做的上传文件
ajaxfileupload1.0.zipajaxfileupload1.0.zipajaxfileupload1.0.zip
博文 http://blog.csdn.net/qq_34273222/article/details/54428580 中所需要的js文件,如有问题请在博客留言。
该js包是在官方下载的ajaxFileUpload.js基础上所做修改后的包,修改该包所要解决的问题包括: 1、浏览器上传文件后不刷新页面再次点击上传时后台...3、解决了使用ajaxFileUpload除了上传文件外不能传递其他参数的bug。
对handleError错误,json返回值已修改,支持批量文件上传
常规的代码,没有什么特别有含量的. .NET MVC实现多图片上传并附带参数(ajaxfileupload)
jquery的一款异步文件上传插件,我博客中有关于此插件的详细教程。 handleError: function( s, xhr, status, e ) { // If a local callback was specified, fire it if ( s.error ) { s.error.call( s....
django+ajaxfileupload文件上传demo