上传文件并获取图片大小宽度高度
上传文件并获取图片大小宽度高度, 之前要使用 input file 的 onload 事件, 这次使用 es7 的 async await 和 Promise 以后代码更简单了.
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>dotcoo async await Promise get image file size width height</title>
</head>
<body>
<input type="file" accept=".jpg, .jpeg, .png, .gif" />
<div id="show"></div>
<script type="text/javascript">
document.querySelector('input').addEventListener('change', async function() {
if (this.files.length === 0) {
return;
}
const file = this.files[0];
const img = document.createElement('img');
img.src = URL.createObjectURL(file);
// 等待图片加载完成
await new Promise(resolve => img.onload = resolve);
show.innerHTML = `name: ${file.name}<br/>
lastModified: ${file.lastModified}<br />
size: ${file.size}<br />
mime: ${file.type}<br />
width: ${img.width}<br />
height: ${img.height}<br />`;
show.appendChild(img);
});
</script>
</body>
</html>