Jquery 图片和高度显示

14 浏览
0 Comments

Jquery 图片和高度显示

我想要弹出已上传图片的宽度和高度。我已经使用了clientWidth和naturalWidth，但它们没有显示正确的值。请问我应该如何做？

0

1 答案

0 Comments

Jquery图片和高度显示的问题是由于需要在上传图片之前检查图片的宽度和高度而引起的。为了解决这个问题，可以使用以下方法：

首先，在HTML代码中引入Jquery库。代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

然后，在HTML代码中添加一个文件上传的input元素，给它一个唯一的类名（这里是"test"）和一个name属性（这里是"vend_logo"）。代码如下：

<input type="file" class="test" name="vend_logo" id="vend_logo">

接下来，使用jQuery的bind方法来绑定change事件，当选择文件时触发。代码如下：

$('.test').bind('change', function() {
  if (file = this.files[0]) {
    img = new Image();
    img.onload = function() {
      var width = this.width;
      alert(width);
    };
    img.src = window.URL.createObjectURL(file);
  }
});

在上述代码中，当文件被选择时，会创建一个新的Image对象，并为其设置一个onload事件处理程序。当图片加载完成时，会获取图片的宽度并弹出一个提示框显示宽度。

这样，当用户选择图片文件后，可以通过这段代码获取图片的宽度，并进行相应的处理。通过检查图片的宽度和高度，可以确保上传的图片符合预期的要求。

参考：Check image width and height before upload with Javascript

0