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中的数据拼接进去即可。代码如下:

createUploadForm: function(id, fileElementId,data) {
    //create form
    var formId = 'jUploadForm' + id;
    var fileId = 'jUploadFile' + id;
    var form = jQuery('');
    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) 
        {
            $('').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;
};

 

第二处 是调用createUploadForm方法地方,如下所示:

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

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

// 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方法:

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

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

“ajaxfileupload.js问题汇总及解决 附修复版下载”的21个回复

  1. 我想问下,ie浏览器返回来提示要下载,没有进入回调函数,火狐和google图片显示不出来,只有框框?请问楼主,这个问题该怎么解决?

  2. 我的data是一个json字符串,使用eval(“data = ” “+data+” ” “);还是报错。
    改成 data=eval(“(“+data+”)”);就可以了。为何这样子?

  3. SCRIPT438: 对象不支持“createUploadForm”属性或方法

    你好。我用了您的修改版js后。上传文件的时候报这个JS错误。是不是IE10不兼容的问题呢?

    1. 不好意思,这段时间一直有事,Blog都没怎么看。
      根据你的描述,建议你再检查下你的JS。
      回头我会发一份我目前使用的,一直都没什么问题。

      1. 您好!我用了您的js之后FF不可用;对于返回json问题,要改成这样才可以用data=eval(“(“+data+”)”);~~~但ie还是跳转不到success里,并且IE弹出下载框

发表评论

电子邮件地址不会被公开。 必填项已用*标注