之前的一个项目让我在注册的时候上传图片并注册成功后将图片保存到数据库。这里用的是base64方法
demo的样式：
案例代码如下：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>上传图片预览功能</title>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script>
//正面
function upload() {
$('#img_z').click();
}
function getzImg(imgFile) {
//判断图片大小
var img1 = document.getElementById("img_z");
var size = img1.files[0].size / 1024;
if(size > 2048) {
return alert('上传图片大小不能超过2M');
} else {
var file = imgFile.files[0];
var reader = new FileReader();
reader.readAsDataURL(file); //将文件读取为Data URL小文件 这里的小文件通常是指图像与 html 等格式的文件
reader.onload = function(e) {
$("#zmz").attr("src", e.target.result);
document.getElementById("img_z_base64").value = reader.result;
}
}
}
</script>
<script>
function a(){
var img_z_base64 = document.getElementById("img_z_base64").value;
alert(img_z_base64)
}
</script>
</head>
<body>
<li class="aui-list-item">
<div class="aui-list-item-inner row aui-content-padded " style="margin-left: 0;">
<div class=" aui-col-xs-8">
图片上传
</div>
<div hidden="hidden">
<input type="file" accept="image/*" onchange="getzImg(this)" value="" id="img_z" style="display:none" />
<textarea id="img_z_base64"></textarea>
</div>
<div class="img_wp" onclick="upload()">
<img src="../img/timg.jpg" id="zmz" height="55" width="100" />
</div>
</div>
<div>
<input type="button" onclick="a()" value="上传"/>
</div>
</li>
</body>
</html>
接着在后台直接将base64的编码存储到数据库中即可。
注意点：
1.因为是用base64存储的，所以需要将数据库表的格式改为mediumblob用于存储大量数据：
2.因为我用的是ajax传递的参数，最后转为json格式到后台的。所以用base64存储的时候发现只能存储600kb以下的图片。而600kb以上的图片不能存储，后台还报错。最后发现是因为json超出大小限制了。
解决方法：在tomcat文件夹下的conf文件中的server.xml 配置：
<Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443"
maxPostSize="-1"/>
264
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
