js使用AjaxFileupload插件实现文件上传

      最近做项目，需要上传表单元素中的文件POST到目标URL，并把得到的数据显示到本页面上，而不跳转到目标URL。那么，现在就要明确两件事：

1）不能直接提交表单，因为一旦点击submit就会自动跳转到action界面；

2）可以选择ajax进行异步数据传输；

      原来只是用过ajax进行简单的数据传输，还没上传过文件呐，于是查了一下，如获至宝地发现了jQuery插件AjaxFileupload，专门用来上传文件~于是乎就马上踏上了AjaxFileupload的研究之旅。

一、实现步骤：

1）引入相关的js

<script type="text/javascript" src="js/jquery-1.11.0.js"></script><script type="text/javascript" src="js/ajaxfileupload.js"></script>

2）代码编写

$.ajaxFileUpload({url: "../GetInfo.jsp",//处理本文件的actionsecureuri: false,fileElementId: 'uploadFile1', //input type="file"的iddataType: 'json',//定义数据的返回格式是jsonsuccess: function (data, status) {  console.log(data);            if(typeof(data.error) != 'undefined') {                  if(data.error != '') {                      alert(data.error);                  } else {                      alert(data.msg);                  }              }  FillTable(data);        },          error: function (data, status, e) {              alert(e);          }      });

二、遇到的问题总结：

1）使用的AjaxFileupload版本与jQuery版本不相同导致报错

一开始使用的是jQuery-2.1.4版本，后来报错了，查了原因发现可能是版本不同，才发现AjaxFileupload的版本是1.2的（真是一个老古董），不过没办法，为了上传文件还是忍忍吧，就把jQuery版本换成了和它一样的老古董。然后问题解决~（AjaxFileupload版本与jQuery版本不用严格相同，但是也不能差太多）

2）AjaxFileupload文件上传成功但是不执行回调函数

修改ajaxfileupload.js源码，把最后几行代码中的代码

if ( type == "json" )            eval( "data = " + data );

修改成：

if ( type == "json" )            data=eval("("+data.replace("<pre>","").replace("</pre>","")+")");

3）控制台报错jQuery.handleError is not a function

现在大家至少也在用jquery1.9以上的版本，ajaxfileupload的版本早就不更新了，它例子里使用的Jquery是1.2的，好老呀。。。这个问题，我以前开发过程中遇过，网上说经测试（我是没测试），是版本1.4.2之后的版本才有handlerError方法，之前就不存在了，为了能够继续使用ajaxfileupload上传我们的附件，只好将代码拷进我们的项目中的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] );    }    }

4）AjaxFileupload上传多文件的实现

修改ajaxfileupload.js源码，

//var oldElement = jQuery('#' + fileElementId);//var newElement = jQuery(oldElement).clone();//jQuery(oldElement).attr('id', fileId);//jQuery(oldElement).before(newElement);//jQuery(oldElement).appendTo(form);  //set attributesfor(var i in fileElementId){          var oldElement = jQuery('#' + fileElementId[i]);   var newElement = jQuery(oldElement).clone();          jQuery(oldElement).attr('id', fileId);          jQuery(oldElement).before(newElement);          jQuery(oldElement).appendTo(form);          });      }