作者：那一年2502931247 | 来源：互联网 | 2023-09-05 19:00
无聊写的一个用户头像上传的demo
原理：
- 把用户头像img标签和input选择文件标签重叠(大小相等，位置相同)，通过设置input inzex的值把input覆盖在图片的上面并且透明度设置为0，即隐藏input;
- 调用h5的fileReader接口拿到图片的base64地址
- 用canvas实现图片压缩
- 上传接口函数uploadImg为模拟的，根据自己项目自定义
index.html:
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
cOntent="/>
<title>头像上传title>
<style>
#header_box{width: 80px;height: 80px;border:1px solid #fff;border-radius: 100%;position: relative;}
#header_box img,input{position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 100%;}
input:hover,img:hover{cursor: pointer;}
input{opacity: 0;z-index: 100;}
img{background-color: #ececec;}
style>
head>
<body>
<div id="header_box">
<img src="#" alt="" id="user"/>
<input type="file" id="file"/>
div>
body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js">script>
<script>
$("#file").on("change",function(e){
var file= e.target.files[0];
var maxSize=2048;//设置图片上传最大值为2M
var name=file.name;
var size=(file.size/1024).toFixed(2);
var type=file.type;
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload=function(e){
var result= e.target.result;
var image = new Image();
image.src = result;
image.onload = function(){
if(size>maxSize){ //判断图像大小，大于2M则压缩后上传 ，小于2M直接上传无需压缩
var img64 = compress(image, 100, 100, 0.7);
//$("#user").attr("src",img64); //实现图片预览功能
//调用后台上传接口 ，把img64当参数传给接口，接口调用成功则返回头像上传成功后的服务器的访问地址，把接口返回的图片地址赋值给页面上img的src即可
uploadImg(img64);
}else{
//$("#user").attr("src",result); //实现图片预览功能
//调用后台上传接口 ，把result当参数传给接口，接口调用成功则返回头像上传成功后的服务器的访问地址，把接口返回的图片地址赋值给页面上img的src即可
}
}
};
});
/**canvas图片压缩函数
* @params
* img:需要压缩的图片对象
* width:压缩后的宽度
* height:压缩后的高
* ratio:图片压缩质量(0-1);
* */
function compress(img, width, height, ratio){
var canvas, ctx, img64;
canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
img64 = canvas.toDataURL("image/jpeg", ratio);
return img64;
}
/**定义模拟图片上传接口函数
* @params
* img:传递给接口的图片的file类型的字符串
* */
function uploadImg(img){
var params={imgPath:img};
$.ajax({
url:"********",
data:params,
type:"post",
success:function(data){
if(data.code==1){ //成功
var imgPath=data.imgPath;//假设接口返回的地址为imgPath
$("#img").attr("src",imgPath);
}
}
})
}
script>
html>
![[大整数乘法] java代码实现](https://img1.php1.cn/3cd4a/24c6f/9f3/0133bb25da242824.jpeg)
京公网安备 11010802041100号