本篇文章介紹使用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，問題完美解決