bootstrap上传图片回显方法

以下是展示图，js下载 提取码：02k0 jquery-easyui-1.5下载 提取码：3cvc

那么好，开始第一步

<!-- 引入easyui的css样式 -->
<link rel="stylesheet" href="<%=request.getContextPath() %>/jquery-easyui-1.5/themes/default/easyui.css">
<!-- 引入easyui的图标css样式 -->
<link rel="stylesheet" href="<%=request.getContextPath() %>/jquery-easyui-1.5/themes/icon.css">
<!-- 引入jqury的js文件 -->
<script type="text/javascript" src="<%=request.getContextPath() %>/jquery-easyui-1.5/jquery.min.js"></script>
<!-- 引入easyui的js文件 -->
<script type="text/javascript" src="<%=request.getContextPath() %>/jquery-easyui-1.5/jquery.easyui.min.js"></script>
<!-- 引入easyui的中文js文件 -->
<script type="text/javascript" src="<%=request.getContextPath() %>/jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入uploadify的css、js -->
<link rel="stylesheet" href="<%=request.getContextPath() %>/js/uploadify/uploadify.css">
<script type="text/javascript" src="<%=request.getContextPath() %>/js/uploadify/jquery.uploadify.min.js"></script>
<!-- 引入kindeditor的css、js -->
<link rel="stylesheet" href="<%=request.getContextPath() %>/js/kindeditor-4.1.10/themes/default/default.css" />
<!-- bootstrap -->
<link rel="stylesheet" href ="<%=request.getContextPath() %>/js/bootstrap3/css/bootstrap.css"></link>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/bootstrap3/js/bootstrap.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath() %>/js/bootstrap-table/bootstrap-table.css">
<script src="<%=request.getContextPath() %>/js/bootstrap-table/bootstrap-table.js"></script>
<script src="<%=request.getContextPath() %>/js/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<!-- bootstrap上传插件 -->
<script src="<%=request.getContextPath() %>/js/bootstrap-fileinput/js/fileinput.js"></script>
<script src="<%=request.getContextPath() %>/js/bootstrap-fileinput/js/locales/zh.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath() %>/js/bootstrap-fileinput/css/fileinput.css">
<!-- 树 -->
<link rel="stylesheet" href="<%=request.getContextPath() %>/js/bootstrap-treeview/bootstrap-treeview.min.css">
<script src="<%=request.getContextPath() %>/js/bootstrap-treeview/bootstrap-treeview.min.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath() %>/js/bootStrap-addTabs/bootstrap.addtabs.css">
<script src="<%=request.getContextPath() %>/js/bootStrap-addTabs/bootstrap.addtabs.min.js"></script>
<!-- bootstrap 弹框 -->
<script src="<%=request.getContextPath() %>/js/bootbox/bootbox.js"></script>

//这里是前台页面的插件
<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: "",
	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);
	}