ajaxfileupload.js 文件上传插件之改进
2014-07-23 15:57
519 查看
最近做了个小项目要用到文件上传操作,上网搜到了ajaxfileupload插件,根据http://blog.csdn.net/anialy/article/details/8587837 的介绍基本能完成上传操作,但是还存在几个问题:
1. 不能批量上传,只能选择一个文件
2. 返回json格式数据不能很好处理,callback函数不能执行
解决方法:
在解决第一点时,发现ajaxfileupload.js代码中并不能体现它支不支持多文件批量上传,有人说它支持也有人说不支持。但是想想好多网站上传文件时调用的file dialog都是系统的,都能选择多文件,而且我后台代码也都是支持多文件上传的,如果只从代码中找问题可能不行。后来终于找到,在html5中有个关键字可以让dialog选择多文件,在
里加一个multiple即可一次性选择多个文件,Ajaxfileupload完全支持
第二点就比较麻烦了,网上也有相关的解决办法
在Ajaxfileupload.js里添加一段代码
handleError:在jquery1.4以后就不支持了,而Ajaxfileupload还需要,所以需要手动加上。
加上之后callback是能执行了,但是确实只执行error。网上有两种解决方案都是修改uploadHttpData: function( r, type )中if ( type == "json" )中代码eval( "data = " + data );
但是不管我改成eval( "data = \'" + data + "\'");还是改成eval( "data = eval(" + data + ")");都不能解决。一个报miss ; error, 一个报miss ) error。后来经调试发现,data在传输过程中会多了一串字符 <div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd"></div>,这应该是迅雷下载会自动加载到body最后的标签。没办法,谁让这个插件不能用response.setContentType("application/x-json");而只能用response.setContentType("text/html");
呢。那就只能手动去除了,于是修改这段代码,并不再用eval,这个方法太容易出错,直接用js的JSON多好
ok,至此,上面两个问题终于解决~~
修改后的文件下载地址 http://download.csdn.net/detail/huoqi12/8539935
1. 不能批量上传,只能选择一个文件
2. 返回json格式数据不能很好处理,callback函数不能执行
解决方法:
在解决第一点时,发现ajaxfileupload.js代码中并不能体现它支不支持多文件批量上传,有人说它支持也有人说不支持。但是想想好多网站上传文件时调用的file dialog都是系统的,都能选择多文件,而且我后台代码也都是支持多文件上传的,如果只从代码中找问题可能不行。后来终于找到,在html5中有个关键字可以让dialog选择多文件,在
<input type="file" id="file" name="file"></input>
里加一个multiple即可一次性选择多个文件,Ajaxfileupload完全支持
<input type="file" id="file" name="file" multiple></input>
第二点就比较麻烦了,网上也有相关的解决办法
在Ajaxfileupload.js里添加一段代码
handleError: function( s, xhr, status, e ) { // If a local callback was specified, fire it if ( s.error ) { s.error.call( s.context || s, xhr, status, e ); } // Fire the global callback if ( s.global ) { (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] ); } }
handleError:在jquery1.4以后就不支持了,而Ajaxfileupload还需要,所以需要手动加上。
加上之后callback是能执行了,但是确实只执行error。网上有两种解决方案都是修改uploadHttpData: function( r, type )中if ( type == "json" )中代码eval( "data = " + data );
但是不管我改成eval( "data = \'" + data + "\'");还是改成eval( "data = eval(" + data + ")");都不能解决。一个报miss ; error, 一个报miss ) error。后来经调试发现,data在传输过程中会多了一串字符 <div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd"></div>,这应该是迅雷下载会自动加载到body最后的标签。没办法,谁让这个插件不能用response.setContentType("application/x-json");而只能用response.setContentType("text/html");
呢。那就只能手动去除了,于是修改这段代码,并不再用eval,这个方法太容易出错,直接用js的JSON多好
if ( type == "json" ){ var index = data.indexOf('<div'); if(index > 0) data = data.substring(0, index); data = JSON.parse(data); }
ok,至此,上面两个问题终于解决~~
修改后的文件下载地址 http://download.csdn.net/detail/huoqi12/8539935
相关文章推荐
- jquery插件--ajaxfileupload.js上传文件原理分析
- 在ionic中用 ajaxfileupload.js 插件上传文件
- (Struts2+ajax+json)上传图片(文件)+ajaxfileupload.js插件的粗略分析
- ajaxFileUpload.js插件支持多文件上传的方法
- ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传
- jQuery插件ajaxfileupload.js实现上传文件
- 使用ajaxFileUpload.js插件实现ajax无刷新上传文件
- jquery 文件上传插件ajaxfileupload.js 实现多图上传,解决文件上传后表单置空的问题
- jquery插件--ajaxfileupload.js上传文件原理分析
- ASP.NET 使用ajaxfileupload.js插件出现上传较大文件失败的解决方法(ajaxfileupload.js第一弹)
- 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
- ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传
- jquery插件--ajaxfileupload.js上传文件原理分析
- js使用AjaxFileupload插件实现文件上传
- 使用ajaxfileupload.js插件实现Ajax方式上传文件
- jquery ajaxFileUpload.js插件支持多文件上传的方法
- jquery插件--ajaxfileupload.js上传文件原理分析
- 上传文件(可用ajaxfileupload.js插件)
- ajaxFileUpload.js插件支持多文件上传的方法
- ajaxFileUpload.js插件支持多文件上传的方法