bootstrap fileinput如何传参，完整demo_fileinput 传参-优快云博客

本篇文章介绍使用bootstrap fileinput来进行图片上传时传递参数的简单介绍，包括springMVC后端如何接受参数(针对初学者，或者遇到相同问题的朋友可以参考一下)。虽然网上有很多关于bootstrap fileinput传参的介绍，但在我这里没什么用，也看了官方的文档这是官方介绍
这里写图片描述
，通过它这个介绍，我们知道要使用uploadExtraData这个属性去传参，读取数据还是PHP的，我使用的是jsp，java语言，但具体要怎么传？后台怎么接收？按照它这个方式，我数据都传不到后台，连个完整demo也不给，让我们这些菜鸟怎么玩？问题解决之后，决定写博客一篇，希望能帮助到遇到和我一样问题的骑士们。。。。好了，话叙正传，说正题，为了更好的展现我的问题，我给出一个完整的demo，上案列：

1.首先我的界面是这样的
这里写图片描述
2.页面代码如下

<table class="table table-striped table-bordered responsive">                           
                           <thead>
                                <tr>
                                    <th>模板</th>
                                    <th>第一月</th>
                                    <th>第二月</th>
                                    <th>第三月</th>
                                    <th>第四月</th>
                                    <th>第五月</th>
                                    <th>第六月</th>
                                 </tr>
                            </thead>
                            <tbody>
                     <tr>      
                                        <td>
                                            <a href="#" class="btn-upload"  employeeCode="1" resultId="1" month="1"  onclick="fileUpload(this)">上传
                                                <img width="20px" height="20px" src="img/soc/search-circle-blue-512.png" alt="alternative text" title="查看上传模板">
                                            </a>
                                        </td>
                                        <td>
                                            <a href="#" class="btn-upload"  employeeCode="1" resultId="1" month="1"  onclick="fileUpload(this)">上传
                                                <img width="20px" height="20px" src="img/soc/search-circle-blue-512.png" alt="alternative text" title="查看上传模板">
                                            </a>
                                        </td>
                                        <td>
                                            <a href="#" class="btn-upload"  employeeCode="1" resultId="1" month="1"  onclick="fileUpload(this)">上传
                                                <img width="20px" height="20px" src="img/soc/search-circle-blue-512.png" alt="alternative text" title="查看上传模板">
                                            </a>
                                        </td>
                                        <td>
                                            <a href="#" class="btn-upload"  employeeCode="1" resultId="1" month="1"  onclick="fileUpload(this)">上传
                                                <img width="20px" height="20px" src="img/soc/search-circle-blue-512.png" alt="alternative text" title="查看上传模板">
                                            </a>
                                        </td>
                                        <td>
                                        <a href="#" class="btn-upload"  employeeCode="1" resultId="1" month="1"  onclick="fileUpload(this)">上传
                                                <img width="20px" height="20px" src="img/soc/search-circle-blue-512.png" alt="alternative text" title="查看上传模板">
                                            </a>
                                        </td>
                                        <td>
                                            <a href="#" class="btn-upload"  employeeCode="1" resultId="1" month="1"  onclick="fileUpload(this)">上传
                                                <img width="20px" height="20px" src="img/soc/search-circle-blue-512.png" alt="alternative text" title="查看上传模板">
                                            </a>
                                        </td>   
                                    </tr>               
                        </tbody>
                    </table>
<div class="modal fade" id="addGroup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">

        <div class="modal-dialog" style="width:565px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" onclick="refresh()">×</button>
                    <h3>导入面谈记录</h3>
                </div>
                <div class="modal-body">
                    <form action="talkRecord-uploadFile.htm" id="form2" enctype="multipart/form-data" method="post">
                        <input type="hidden" id="employeeCode1" name="employeeCode" />
                        <input type="hidden" id="resultId" name="result_id" />
                        <table class="table table-striped table-bordered responsive">
                            <div class="form-group">
                                <input id="file-1" type="file" name="file"   class="file-loading"> 
  //input这里注意命名规范，本人犯了一个低级错误，定义了一个class=“file” 结果下面的js不起作用了，调试了半天
                            </div>
                         </table>
                      </form>
                </div>
            </div>
        </div>
    </div>

//这里我抽取主要js
<javascript>
function fileUpload(param){
         var resultId=$(param).attr("resultId");
         var employeeCode=$(param).attr("employeeCode");
         var month=$(param).attr("month");
            $("#txtitemId").val(month);
            $("#txtresultId").val(resultId);
            //$("#employeeCode1").val(employeeCode);
            $('#addGroup').modal('show');
            $("#file-1").fileinput({
                  showPreview: false,
                  overwriteInitial: true, //是否显示预览
                  enctype: 'multipart/form-data',
                  maxFileSize: 9999999,
                  initialCaption: "Please select a file",
                  uploadUrl: "talkRecord-uploadFile.htm",
                   uploadAsync: false,//默认异步上传
                  uploadExtraData:function (previewId, index) {    
//注意这里，传参是json格式,后台直接使用对象属性接收，比如employeeCode，我在RatingQuery 里面直接定义了employeeCode属性，然后最重要的也是
//最容易忽略的，传递多个参数时，不要忘记里面大括号{}后面的分号，这里可以直接return {a:b}; 或者{a:b}都可以，但必须要有大括号包裹
                        var data = {
                            employeeCode : employeeCode,
                            result_id:resultId,
                            month:month
                        };
                        return data;
                   },
           }).on('filebatchuploadsuccess', function() {
                 refresh();
            });

        }

</javascript>

3.请求后台，获取前台请求参数


@RequestMapping(value="talkRecord-uploadFile",method = RequestMethod.POST)
      @ResponseBody
        public String uploadFile(ModelMap model,@RequestParam(value="file") MultipartFile file,RatingQuery query,HttpServletRequest request) throws IOException {
          String employeeCode=request.getParameter("employeeCode");
            this.setLayout(LayoutType.EMPTY);
            byte[] bytes = file.getBytes();
            talkRecordModel talk=new talkRecordModel();

                talk.setSixMonth(bytes);

            if(!StringUtil.isEmpty(query.getEmployeeCode())){
                talk.setEmployeeCode(query.getEmployeeCode());
            }
            talk.setItemId(query.getMonth());
            if(!StringUtil.isEmpty(query.getResult_id())){
                talk.setResultId(Integer.parseInt(query.getResult_id()));
            }else{
                talk.setResultId(0);
            }
            talk.setChange_man(CurrentUserUtil.getCurrentUserName());
            talk.setChange_time(new Date());
            talkRecordService.updateTalkRecord(talk);
            return "true";

        }