本篇文章介绍使用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,问题完美解决