限制上传图片的宽高

最新推荐文章于 2023-12-08 14:28:14 发布

在线小白www

最新推荐文章于 2023-12-08 14:28:14 发布

阅读量338

点赞数

分类专栏： JavaScript jQuery Vue 文章标签：前端 servlet html

本文链接：https://blog.csdn.net/qq_43654065/article/details/125908848

版权

JavaScript 同时被 3 个专栏收录

128 篇文章 7 订阅

订阅专栏

jQuery

109 篇文章 3 订阅

订阅专栏

Vue

48 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="file" accept="image/*" onchange="uploadFile(event)">
  <script>
    function uploadFile(event) {
      let file = event.target.files[0]
      let img = new Image()
      let reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = (e) => {
        let data = e.target.result
        let image = new Image()
        image.src = data
        image.onload = () => {
          let width = image.width
          let height = image.height
          if (width > 100 || height > 100) {
            console.log('image too huge!');
          }
        }
      }
    }
  </script>
</body>

</html>