目录
效果
代码
js
function UploadImg(file) {
var MAXWIDTH = 260;
var MAXHEIGHT = 180;
var div = document.getElementById('preview');
if (file.files && file.files[0]) {
div.innerHTML = '<img id=imghead>';
var img = document.getElementById('imghead');
img.onload = function () {
var rect = clacImg(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
img.width = rect.width;
img.height = rect.height;
// img.style.marginLeft = rect.left+'px';
img.style.marginTop = rect.top + 'px';
}
var reader = new FileReader();
reader.onload = function (e) { img.src = e.target.result; }
reader.readAsDataURL(file.files[0]);
}
}
function clacImg(maxWidth, maxHeight, width, height) {
var param = { top: 0, left: 0, width: width, height: height };
if (width > maxWidth || height > maxHeight) {
rateWidth = width / maxWidth;
rateHeight = height / maxHeight;
if (rateWidth > rateHeight) {
param.width = maxWidth;
param.height = Math.round(height / rateWidth);
} else {
param.width = Math.round(width / rateHeight);
param.height = maxHeight;
}
}
param.left = Math.round((maxWidth - param.width) / 2);
param.top = Math.round((maxHeight - param.height) / 2);
return param;
}
html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片上传本地预览</title>
<style type="text/css">
#preview {
width: 260px;
height: 190px;
border: 1px solid #000;
overflow: hidden;
}
</style>
<script type="text/javascript" src="ImgUpload.js"></script>
</head>
<body>
<div id="preview">
<img id="imghead">
</div>
<input type="file" onchange="UploadImg(this)" />
</body>
</html>
实战代码Download
(github:KuanG97) 下载实战代码 ClickHere》
快捷链接
全部React学习笔记的目录 Click Here>>
全部Javascript学习笔记的目录 Click Here>>
Less学习笔记 Click Here>>
安利一波前端开发推荐使用的工具 Click Here>>
ESLint问题记录 Click Here>>
github各类实战练习源码下载 Click Here>>
如果你觉得我的东西能帮到你,无限欢迎给我的github库点个收藏Star~0v 0~