用html做上传图片时，怎样限制上传图片的尺寸？

Posted 2023-02-27

我用html做上传图片时，怎样限制上传图片的尺寸？就是在图片上传之前，用javascript报错？

参考技术A <script>

var img=null;

function s()



if(img)img.removeNode(true);

img=document.createElement("img");

img.style.position="absolute";

img.style.visibility="hidden";

img.attachEvent("onreadystatechange",orsc);

img.attachEvent("onerror",oe);

document.body.insertAdjacentElement("beforeend",img);

img.src=inp.value;



function oe()



alert("cant load img");



function orsc()



if(img.readyState!="complete")return false;

alert("图片大小："+img.offsetWidth+"X"+img.offsetHeight);

alert("图片尺寸："+img.fileSize);



</script>

<input id=inp type="file">

<br>

<button onclick="s()">Test</button> 参考技术B <script>
var img=null;
var xianzhiheight=60;//限制尺寸的高度
var xianzhiwidth=80;//限制尺寸的宽度

function yanzheng()

if(img)img.removeNode(true);
img=document.createElement("img");
img.style.position="absolute";
img.style.visibility="hidden";
document.body.insertAdjacentElement("beforeend",img);
img.src=form1.file.value;
if (img.offsetHeight>xianzhiheight)

alert("您选择的图片超过了上传限制的最大高度："+xianzhiheight);
document.form1.file.outerHTML=document.form1.file.outerHTML.replace(/value=\w/g,'');
return false;


if (img.offsetWidth>xianzhiwidth)
alert("您选择的图片超过了上传限制的最大宽度："+xianzhiwidth);
document.form1.file.outerHTML=document.form1.file.outerHTML.replace(/value=\w/g,'');
return false;



</script>
<form id="form1" name="form1" method="post" action="">
<input type="file" Name="file" id="file" value="默认值" onchange="yanzheng()">
<input type="submit" name="Submit" value="提交" />
</form>本回答被提问者采纳

vue 上传图片判断大小尺寸

uploadImg(e, record, index) {
  const file = e.target.files[0];
  // 判断上传图片的大小 限制
  if (file.size / 1024 < 1000) {
    const that = this;
    let imgWidth = "";
    let imgHight = "";
    // 限制图片的尺寸 为2000*1500
    const isSize = new Promise(function(resolve, reject) {
      const _URL = window.URL || window.webkitURL;
      const img = new Image();
      img.onload = function() {
        imgWidth = img.width;
        imgHight = img.height;
        const valid =
          img.width === parseInt(2000) && img.height === parseInt(1500);
        valid ? resolve() : reject();
      };
      img.src = _URL.createObjectURL(file);
    }).then(
      () => {
        const formData = new FormData();
        formData.append("files", file);
        that.loading = true;
        // 这里是调取接口
        接口名字(formData)
          .then(res => {
              // 接口成功操作啥的
              that.$message.success("图片上传成功");
    
          })
          .finally(() => {
            that.loading = false;
          });
      },
      () => {
        // 图片尺寸不对 提示
        this.$message.info(
          `图片尺寸应为2000x1500,当前图片尺寸为${imgWidth}x${imgHight}`
        );
        return Promise.reject();
      }
    );
  } else {
    this.$message.info("图片最大1000k");
  }
}