bootstrap上传图片回显方法

以下是展示图

那么好，开始第一步

//这里是前台页面的插件
<div class="form-group" >
		<label for="userImg" class="col-sm-2 control-label">头像</label>
		<div class="col-sm-8">
		<!-- 后台传参使用 -->
		<input type="hidden" id="testimg" name="book_image" />//图片字段
		<input type="file" multiple class="projectfile" accept="book_image/*" name="book_image" id="headImgId"></div>
</div>

//body 下插件
<script type="text/javascript">
$('#headImgId').fileinput({
	language: 'zh', //设置语言
	uploadUrl: '<%=request.getContextPath() %>/pos/uploadHeadImg.do', //上传的地址
	allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
	showUpload: true, //是否显示上传按钮
	showCaption: false,//是否显示标题
	browseClass: "btn btn-primary", //按钮样式
	//dropZoneEnabled: false,//是否显示拖拽区域
	//minImageWidth: 50, //图片的最小宽度
	//minImageHeight: 50,//图片的最小高度
	//maxImageWidth: 1000,//图片的最大宽度
	//maxImageHeight: 1000,//图片的最大高度
	//maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
	//minFileCount: 0,
	maxFileCount: 2, //表示允许同时上传的最大文件个数
	enctype: 'multipart/form-data',
	validateInitialCount:true,
	previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
	msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
}).on('fileuploaded', function(event, data, previewId, index) {
	var imgval = $('#testimg').val();
	if(imgval == null || imgval == "" || imgval == undefined){
		imgval = "http://<%= request.getServerName()%>:<%=request.getServerPort()%><%=request.getContextPath()%>/"+data.response;
	}else{
		imgval += ","+"http://<%= request.getServerName()%>:<%=request.getServerPort()%><%=request.getContextPath()%>/"+data.response;
	}
	$('#testimg').val(imgval);
});
</script>

这里是controller层的写法 FileUtil 文件如果没有的话 点击下载 提取码：wmyx

	//上传图片
	@RequestMapping("uploadHeadImg")
	@ResponseBody
	public String uploadHeadImg(MultipartFile book_image, HttpServletRequest request) {
		return FileUtil.FileUpload(book_image, request);
	}