本文介绍了如何使用layui前端框架配合Java后端，将图片以base64编码的方式上传到MySQL数据库。首先，展示了layui的JS和HTML部分用于文件选择和预览。当用户提交时，base64编码的图片数据通过隐藏字段发送到Controller，然后在Service层处理，解码并保存到本地文件系统，同时返回文件路径存储在数据库中。在展示图片时，如果文件存在则从数据库路径加载，否则显示默认头像。
基于layui框架，实现从jsp页面上传图片到数据库，熟悉layui框架才能用。
首先如何上传图片。
这里为layui 的js 部分和 html
var uploadInst = upload.render({
elem: '#uploadBtn' //上传按钮的id
,accept: 'images' // 上传文件的类型
,auto: false
,size: 1024 * 1024 * 2 //上传文件的最大 大小 这里为2M
,choose: function(obj){
//预读本地文件示例，不支持ie8
//当用户点击上传并选好图片之后，将图片转为base64格式
obj.preview(function(index, file, result){
//直接将img的src属性值 转为base64 立即显示在右侧
$('#faceImg').attr('src', result); //图片链接(base64)
//将隐藏域中的值改为base64传给后台
$(":hidden[name=face]").val(result);
});
}
; })
头像
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
