使用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参数了!

你可能感兴趣的:(ajaxFileUpload)