1.效果图(将数据和图片一起保存到数据库,查询数据时图片进行展示)
2.springboot+easyui写的,将图片上传到resources下面的upload123文件夹中,所以首先应该新建一个文件夹
3.html
<div id="win" class="easyui-dialog" title="班级信息添加" style="width: 400px; padding: 10px 20px; height: 410px;"
closed="true" buttons="#dlg-buttons">
<form id="fm" method="post" action="" style="margin-top: 20px; margin-left: 20px;">
<div class="fitem">
<label>贷款人数:</label>
<input id="dkrs" style="" name="" class="easyui-textbox" />
</div>
<div class="fitem">
<label>班级名称:</label>
<input id="bjmc" name="" class="easyui-textbox" />
</div>
<div class="fitem">
<label>班级人数:</label>
<input id="bjrs" name="" class="easyui-textbox" />
</div>
<div class="fitem">
<label>老师名称:</label>
<input id="lsmc" name="" class="easyui-textbox" />
</div>
<div class="fitem">
<label>辅导员名称:</label>
<input id="fdymc" name="" class="easyui-textbox" />
</div>
<div class="fitem">
<label>辅导员编号:</label>
<input id="fdybh" name="" class="easyui-textbox" />
</div>
<div class="fitem">
<label>辅导员头像:</label>
<input type="file" name="file_upload2" id = "uplx" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="imgPreview(this)" >
</div>
<div id="Imgdiv" class="fitem">
<label></label>
<img id="preview" width="200px" height="200px" placeholder="预览"/>
</div>
<!--直接写提交取消的事件不需要在js中绑定-->
<div id="dlg-buttons" style="display: block">
<a id="confirm" href="javascript:void(0)" class="easyui-linkbutton c6" iconcls="icon-ok" onclick="Modify()" style="width: 90px">提交</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#win').dialog('close')" style="width: 90px">取消</a>
</div>
</form>
</div>
4.js使用ajax提交数据
//添加数据进行提交
function Modify(){
//贷款人数
var dkrs = $("#dkrs").textbox('getValue')
//班级名称
var bjmc = $("#bjmc").textbox('getValue')
//班级人数
var bjrs = $("#bjrs").textbox('getValue')
//老师名称
var lsmc = $("#lsmc").textbox('getValue')
//辅导员名称
var fdymc = $("#fdymc").textbox('getValue')
//辅导员编号
var fdybh = $("#fdybh").textbox('getValue')
var formData = new FormData();
formData.append('file', $('#uplx')[0].files[0]); //添加图片信息的参数
formData.append('dkrs',dkrs);
formData.append('bjmc',bjmc);
formData.append('bjrs',bjrs);
formData.append('lsmc',lsmc);
formData.append('fdymc',fdymc);
formData.append('fdybh',fdybh);
$.ajax({
type:'post',
dataType:'json',
data:formData,
cache: false, //上传文件不需要缓存
url:'../../addData',
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
success:function(data){
if(data.success=='ok'){
$.messager.alert('提示', '添加数据成功!');
window.location.reload();
}else{
$.messager.alert('提示', '添加数据失败!');
}
}
})
}
5.controller代码(上传那部分代码可以提取为工具类)
@ResponseBody
@RequestMapping("/addData")
public Map<String,Object> adddata(@RequestParam MultipartFile file,String dkrs ,String bjmc,String bjrs, String lsmc,String fdymc,String fdybh,HttpServletRequest request ) throws IOException {
Map<String,Object> map=new HashMap<String,Object>();
//使用UUID给图片重命名,并去掉四个“-”
String name = UUID.randomUUID().toString().replaceAll("-", "");
//获取文件的扩展名
String ext = FilenameUtils.getExtension(file.getOriginalFilename());
//设置图片上传路径
//获取项目根路径下面自己新建的upload123文件夹,用于存储图片
String url = request.getSession().getServletContext().getRealPath("/upload123");
File filex=new File(url);
if(!filex.exists()){
filex.mkdir();
}
//以绝对路径保存重名命后的图片
file.transferTo(new File(url+"/"+name + "." + ext));
//把图片存储路径保存到数据库
String urlxxx="upload123/"+name + "." + ext;
int i=dataShowService.insertIntoTable(dkrs,bjmc,bjrs,lsmc,fdymc,fdybh,urlxxx);
if(i>0){
map.put("success","ok");
map.put("msg","添加成功");
}else{
map.put("msg","添加失败");
}
return map;
}
6.到此为止数据添加和将图片添加数据库已经完成,显示图片时其实就是将数据库中的路径查询出来在前台展示,所以下面就是展示了(实例使用easyui)
<table id="dgs" title="文章管理" class="easyui-datagrid" fitColumns="true" pagination="true"
toolbar="#tb" rownumbers="true">
<thead>
<tr>
<th field="idx" checkbox="true" class="chj" align="center"></th>
<!--<th field="tid" width="20" align="center" hidden="true"></th>-->
<th data-options="field:'image',width:40, formatter: imgFormatter">辅导员头想</th>
</tr>
</thead>
</table>
主要讲解图片这一栏:下面是js代码
function imgFormatter(value,row,index){
debugger
if('' != value && null != value)
value = '<img style="width:30px; height:30px" src="' + value + '" >';
return value;
}
感兴趣的小伙伴可以扫码关注下公众号哦,公众号会分享高质量的技术文章哦