上传文件并获取图片大小宽度高度

2020-03-17 11:05 2103人阅读评论 (0)

Tags: js

上传文件并获取图片大小宽度高度, 之前要使用 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>

man ssh 中文 >>

<< Graphviz 流程图