bootstrap fileinput如何传参，完整demo

来源：互联网发布：淘宝店掌柜名字怎么改编辑：程序博客网时间：2024/06/05 00:00

本篇文章介绍使用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";        }

4，问题完美解决

阅读全文

0 0