用原生js实现上传头像，原理是通过new FileReader();将图片转换成base64格式的一长串字符串。将字符串提交给后台即可。
就是这个字符串代替img路径src实现图片显示。
完整demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='./js/jquery-3.4.1.min.js'></script>
<title>Document</title>
</head>
<body>
<input id='fileid' type="file" value='选择文件'>
<hr>
<button id='btn'>点击上传</button>
<img id='img' src="" alt="">
<script>
//上传头像将本地图片，转换成base64上传到后台。
$('#btn').click(function(){
// console.log($('#fileid')[0].files[0],new FileReader())
var reader = new FileReader();
var AllowImgFileSize = 2100000; //上传图片最大值(单位字节)（ 2 M = 2097152 B ）超过2M上传失败
var file = $("#fileid")[0].files[0];
var imgUrlBase64;
if (file) {
//将文件以Data URL形式读入页面
imgUrlBase64 = reader.readAsDataURL(file);
reader.onload = function (e) {
//var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64码部分（可选可不选，需要与后台沟通）
if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
alert( '上传失败，请上传不大于2M的图片！');
return;
}else{
//执行上传操作
alert(reader.result);//重点得到这个字符串，然后把这个字符串给后台就行。
$('#img').attr('src',reader.result)
}
}
}
})
//第二个功能,本demo没有用到。我自己标记一下怕忘。
//将站内图片转换为base64
function base(){
var url = "static/img/js1.jpg";//这是站内的一张图片资源，采用的相对路径
convertImgToBase64(url, function(base64Img){
//转化后的base64
alert(base64Img);
});
}
//实现将项目的图片转化成base64
function convertImgToBase64(url, callback, outputFormat){
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'),
img = new Image;
img.crossOrigin = 'Anonymous';
img.src = url;
img.onload = function(){
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img,0,0);
var dataURL = canvas.toDataURL(outputFormat || 'image/png');
callback.call(this, dataURL);
canvas = null;
};
}
</script>
</body>
</html>
2609
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
