[原创]使用ajaxFileUpload.js上传文件时附带额外参数。

最近公司的一个项目涉及到导入Excel的功能，于是就想到用ajaxFileUpload来实现上传文件，因为用过很多次了，网上也有很多文章介绍。使用方法不表。但是在附带参数这个环节卡住了：文件可以上传到后台，但是附带的json参数怎么都传不到后台。

通过网上的文章和查看ajaxFileUpload.js源码发现：ajaxFileUpload.js本身根本就不支持附带参数。

function ajaxFileUpload(DOMId,row){
    var param={"exam.class_id":row.class_id,
            "exam.subject_id_list":row.subject_id_list,
          "exam.subject_name_list":row.subject_name_list};
    $.ajaxFileUpload({
        url:'importExcel_Exam_n.do?'+param,
        type:'post',
        secureuri: false,
        fileElementId: DOMId,
        dataType:'text/plain',
        data:param,
        success: function(data, status){  
            $('#imageName').html(data);
        },
        error: function(data, status, e){
            $('#imageName').html('上传失败');
        }
    });
}

data这一个参数根本就不被ajaxFileUpload.js支持。
但是可以通过更改ajaxFileUpload.js来支持这一参数。具体如下：

打开ajaxFileUpload.js源码(网上的版本好像一般都是未压缩的，所以可以直接查看源码)，找到这块代码：

createUploadForm: function(id, fileElementId){

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

//...中间省略

return form;

}

新增红色部分代码：

createUploadForm: function(id, fileElementId,data){

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

//...中间省略
if(data){
      for(var i in data){
          $('<input type="hidden" name="'+i+'" value="'+data[i]+'"/>').appendTo(form);
      }
}
return form;
}

还有一处需要修改，是为了接收data参数：

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 = s.fileElementId;        
  var form = jQuery.createUploadForm(id, s.fileElementId);

新增红色部分：

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 = s.fileElementId;        
  var form = jQuery.createUploadForm(id, s.fileElementId,s.data);

修改完保存，再次运行，后台就可以接收到传递过来的json参数了！