ajaxfileupload.js 文件上传插件之改进

最近做了个小项目要用到文件上传操作，上网搜到了ajaxfileupload插件，根据http://blog.csdn.net/anialy/article/details/8587837 的介绍基本能完成上传操作，但是还存在几个问题：

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,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

ajaxfileupload.js 文件上传插件之改进

相关文章