方案一
代码语言：html复制<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>头像</title>
</head>
<script src="http://i.gtimg.cn/qzone/biz/gdt/lib/jquery/jquery-2.1.4.js?max_age=31536000"></script>
<script src="js/avator.js"></script>
<body>
<input type="file" id="upLoad" name="image">
<!-- 显示上传之后的图片 -->
<div id='previewImg'>
<img src="" id='viewImg' style="height: 200px;"/>
</div>
<button id="submit">提交</button>
</body>
</html>$(function () {
var imgsrc = ''
$("#submit").click(function () {
alert(imgsrc);
$.ajax({
url: '/avatar',
type: 'POST',
dataType: 'json',
data: {
'imgsrc': imgsrc
},
success: function (res) {
alert('666');
},
error: function () {
alert('123');
}
});
});
$('#upLoad').on('change', function () {
var filePath = $(this).val(), //获取到input的value，里面是文件的路径
fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
imgBase64 = '', //存储图片的imgBase64
fileObj = document.getElementById('upLoad').files[0]; //上传文件的对象,要这样写才行，用jquery写法获取不到对象
// 检查是否是图片
if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
alert('上传错误,文件格式必须为：png/jpg/jpeg');
return;
}
alert(fileObj.size / 1024);
if (fileObj.size / 1024 > 20000) {
// alert('大于200k');
// 调用函数，对图片进行压缩
compress(fileObj, function (imgBase64) {
imgBase64 = imgBase64; //存储转换的base64编码
imgsrc = imgBase64;
$('#viewImg').attr('src', imgBase64); //显示预览图片
});
} else {
// alert('小于200k');
// 调用函数，不对图片进行压缩
directTurnIntoBase64(fileObj, function (imgBase64) {
imgBase64 = imgBase64; //存储转换的base64编码
imgsrc = imgBase64;
$('#viewImg').attr('src', imgBase64); //显示预览图片
});
}
});
// 不对图片进行压缩，直接转成base64
function directTurnIntoBase64(fileObj, callback) {
var r = new FileReader();
// 转成base64
r.onload = function () {
//变成字符串
imgBase64 = r.result;
console.log(imgBase64);
callback(imgBase64);
}
r.readAsDataURL(fileObj); //转成Base64格式
}
// 对图片进行压缩
function compress(fileObj, callback) {
if (typeof (FileReader) === 'undefined') {
console.log("当前浏览器内核不支持base64图标压缩");
//调用上传方式不压缩
directTurnIntoBase64(fileObj, callback);
} else {
try {
var reader = new FileReader();
reader.onload = function (e) {
var image = $('<img/>');
image.load(function () {
square = 390, //定义画布的大小，也就是图片压缩之后的像素
canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
imageWidth = 0, //压缩图片的大小
imageHeight = 0,
offsetX = 0,
offsetY = 0,
data = '';
canvas.width = square;
canvas.height = square;
context.clearRect(0, 0, square, square);
if (this.width > this.height) {
imageWidth = Math.round(square * this.width / this.height);
imageHeight = square;
offsetX = -Math.round((imageWidth - square) / 2);
} else {
imageHeight = Math.round(square * this.height / this.width);
imageWidth = square;
offsetY = -Math.round((imageHeight - square) / 2);
}
context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);
var data = canvas.toDataURL('image/jpeg');
//压缩完成执行回调
callback(data);
});
image.attr('src', e.target.result);
};
reader.readAsDataURL(fileObj);
} catch (e) {
console.log("压缩失败!");
//调用直接上传方式 不压缩
directTurnIntoBase64(fileObj, callback);
}
}
}
});方案2
代码语言：javascript复制<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="file"><br>
<img src="" height="200" alt="Image preview area..." title="preview-img">
<script>
var fileInput = document.querySelector('input[type=file]'),
previewImg = document.querySelector('img');
fileInput.addEventListener('change', function () {
var file = this.files[0];
var reader = new FileReader();
// 监听reader对象的的onload事件，当图片加载完成时，把base64编码賦值给预览图片
reader.addEventListener("load", function () {
previewImg.src = reader.result;
}, false);
// 调用reader.readAsDataURL()方法，把图片转成base64
reader.readAsDataURL(file);
}, false);
</script>
</body>
</html>参考：
https://www.cnblogs.com/xh_Blog/p/8269581.html
