ajaxfileupload.js问题汇总及解决 附修复版下载



使用Jquery做上传文件处理时，用到了ajaxfileupload.js 这个第三方代码，但是这个js几乎就是半成品，问题很多。现在整理如下并附修复版的ajaxfileupload.js下载。

问题：
1：无法带参数提交，只能上传文件；
2：运行时报：jQuery.handleError is not a function 错误；
3：执行成功后，始终指向error方法处理，无法执行sucess方法；

解决方法：
1：无法带参数提交，只能上传文件；
原作者一定是把这个代码当作练习来写的，只完成了文件提交这个功能。需要对代码做些许修改即可。有两处修改：
第一处是将原createUploadForm: function(id, fileElementId) 方法添加一个data参数，并将data中的数据拼接进去即可。代码如下：

JavaScript

createUploadForm: function(id, fileElementId,data) { //create form var formId = 'jUploadForm' + id; var fileId = 'jUploadFile' + id; var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>'); var oldElement = jQuery('#' + fileElementId); var newElement = jQuery(oldElement).clone(); jQuery(oldElement).attr('id', fileId); jQuery(oldElement).before(newElement); jQuery(oldElement).appendTo(form); // 增加参数的支持 if (data) { for (var i in data) { $('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form); } } //set attributes jQuery(form).css('position', 'absolute'); jQuery(form).css('top', '-1200px'); jQuery(form).css('left', '-1200px'); jQuery(form).appendTo('body'); return form;},

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

createUploadForm:function(id,fileElementId,data){

    //create form

    varformId ='jUploadForm' + id;

    varfileId ='jUploadFile' + id;

    varform =jQuery('<form action="" method="POST" name="'+ formId+ '" id="'+ formId+ '" enctype="multipart/form-data"></form>');

    varoldElement =jQuery('#'+ fileElementId);

    varnewElement =jQuery(oldElement).clone();

    jQuery(oldElement).attr('id',fileId);

    jQuery(oldElement).before(newElement);

    jQuery(oldElement).appendTo(form);

 

    // 增加参数的支持

    if(data){

        for(vari indata){

            $('<input type="hidden" name="'+ i+ '" value="'+ data[i]+ '" />').appendTo(form);

        }

    }

 

    //set attributes

    jQuery(form).css('position','absolute');

    jQuery(form).css('top','-1200px');

    jQuery(form).css('left','-1200px');

    jQuery(form).appendTo('body');

    returnform;

},

第二处 是调用createUploadForm方法地方，如下所示：

JavaScript

ajaxFileUpload: function(s) { // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout s = jQuery.extend({}, jQuery.ajaxSettings, s); var id = new Date().getTime(); // 修改为调用添加参数的方法 // var form = jQuery.createUploadForm(id, s.fileElementId); var form = jQuery.createUploadForm(id, s.fileElementId, s.data); var io = jQuery.createUploadIframe(id, s.secureuri); ...

1

2

3

4

5

6

7

8

9

10

11

ajaxFileUpload:function(s){

   // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout        

  s =jQuery.extend({},jQuery.ajaxSettings,s);

   varid =new Date().getTime();

    

   // 修改为调用添加参数的方法

  // var form = jQuery.createUploadForm(id, s.fileElementId);

   varform =jQuery.createUploadForm(id,s.fileElementId,s.data);

    

   vario =jQuery.createUploadIframe(id,s.secureuri);

  ...

2：运行时报：jQuery.handleError is not a function 错误；
这个错误是由于ajaxfileupload.js 是在jquery1.4.2版本之前写的，Jquery之后的版本已经没有了handleError 方法，所以可以将1.4.2版本中的该方法复制到该js中。

JavaScript

// handleError 方法在jquery1.4.2之后移除了，此处重写改方法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] ); }},

1

2

3

4

5

6

7

8

9

10

11

12

// handleError 方法在jquery1.4.2之后移除了，此处重写改方法

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]);

    }

},

3：执行成功后，始终指向error方法处理，无法执行sucess方法；
这个是由于ajaxfileupload.js 处理返回data的时候，没有考虑后台返回的是字符串的问题(即使返回的JSON格式数据，我们也大多喜欢转化为字符串来返回)。修改uploadHttpData方法：

JavaScript

// Get the JavaScript object, if JSON is used.if ( type == "json" ){ // 如果返回的是字符串(JSON格式字符串)，下面会报错，导致无法走入sucess方法 加上" // eval( "data = " + data ); eval("data = " "+data+" " ");}

1

2

3

4

5

6

// Get the JavaScript object, if JSON is used.

if (type =="json" ){

    // 如果返回的是字符串(JSON格式字符串)，下面会报错，导致无法走入sucess方法 加上"

    // eval( "data = " + data );

    eval("data = ""+data+" " ");

}

修复版ajaxfileupload.js 下载 ：ajaxfileupload.js

参考：http://blog.yadgen.com/?p=970