jQuery插件ajaxFileUpload异步上传文件的使用心得

前言：

在项目开发中用到了异步文件上传，并返回文件上传的状态，由于之前使用的是form表单进行文件的上传，不能实现该需求，所以使用了ajaxfileupload.js进行开发。

有些小伙伴没有耐心看到最后，那就直接告诉你们结果吧，替换这个版本的ajaxfileupload.js就可以解决这个问题！

ajaxfileupload.js下载地址（这是本人已经修改过的，可以正常解析data）：

http://download.csdn.net/download/m0_37770508/10107675

开发准备：

ajaxfileupload.js下载地址：http://download.csdn.net/download/m0_37770508/10107675

具体使用步骤:

1、在页面中引入ajaxfileupload.js

2、为文件上传按钮添加onclick事件

上传

3、编写调用方法

function ajaxFileUpload() {

    var newly_title = $("#newly_title").val();//此为传递参数，视需求编写     //核心部分如下！！！：         

    $.ajaxFileUpload({

        url: "/upload?newly_title="+newly_title,//请求后台方法        

        type: 'post',                           //选择提交方式get/post        

        secureuri: false,                       //是否启用安全提交，默认为false        

        fileElementId: 'file',                  html中文件提交按钮的id          

        dataType: 'text',                       //数据提交类型：text、json、jsonp等        

        success: function (data) {              //请求返回后对数据的处理            

            if(data=="success"){                                 

                $("#success").modal('show');                

                $("#upload").modal('hide');                

                setTimeout('location.reload()',1000);            

            }else{                

                $("#fail").modal('show');                

                $("#err_message").text(data);            

            }        

        }    

    });

}

4、使用中常见的错误以及解决办法

①返回data不能进行正常解析：

如果在ajax的dataType设置为非text类型时，ajaxfileupload返回的data

并非为json格式，而是在json外层包裹了一层

标签，导致不能正确解析该json。具体解决办法如下：
 
 
（修改ajaxfileupload.js源码，若不想修改可直接下载上面链接中的我自己使用的已经修改过的ajaxfileupload.js）
 
 
：将ajaxfileupload.js中的：
 
 
 
  
 if ( type == "json" ) { eval( "data = " + data); }
 
 
 
 
替换为：
 
 
 
  
 if ( type == "json" ){ data = jQuery.parseJSON(jQuery(data).text()); }
 
 
 
 
（直接处理前台返回的数据，利用正则表达式）
 
 
 
  
 var reg = /(.+)<\/pre>/g;
 
  
var result = data.match(reg);
 
  
data = RegExp.$1;
 
 
 
 
②ajax请求返回后执行error操作（报错为）
 
 
正常操作，可ajax返回进入error中。有可能因为jquery版本和ajaxfileupload.js的版本兼容问题，还有一种原因是由于请求返回非json值有关。具体解决办法如下：
 
 
（版本问题，报错为：jQuery.handleError is not a function）
 
 
由于ajaxfileupload.js是在jquery1.4.2版本之前写的，Jquery之后的版本已经没有了handleError方法，所以可以将1.4.2版本中的该方法复制到该js中。
 
 
（返回非json格式数据问题）
 
 
解决办法参照①中即可
 
 
扩展：
 
 
ajax中的dataType中的json和jsonp类型的区别和联系：
 
 
http://www.cnblogs.com/iovec/p/5312464.html 
 
 
ajaxfileupload.js下载地址（这是本人已经修改过的，可以正常解析data）：
 
 
http://download.csdn.net/download/m0_37770508/10107675