jQuery获取file控件中图片的宽高与大小

获取 file 控件中图片的宽高与大小可以通过以下步骤进行：

步骤一：引入jQuery库

首先，在页面中引入 jQuery 库，可以使用以下代码：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

步骤二：读取文件

获取 file 控件中的文件，可以使用 FileReader 对象。以下是一个简单示例：

var file = document.getElementById('file').files[0];
var reader = new FileReader();
reader.readAsDataURL(file);

其中 file 是获取 file 控件中的文件，reader.readAsDataURL(file) 用于将文件读取为 base64 格式的字符串。当文件读取完成后，将触发 onload 事件。

步骤三：获取图片宽高与大小

读取完成后，可以使用 Image 对象来获取图片的宽高与大小。以下是一个完整的示例：

var file = document.getElementById('file').files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
  var img = new Image();
  img.src = e.target.result;
  img.onload = function() {
    var width = this.width;
    var height = this.height;
    var size = file.size;
    console.log('宽度：' + width + 'px');
    console.log('高度：' + height + 'px');
    console.log('大小：' + size + 'bytes');
  };
};

在这个示例中，首先使用 FileReader 对象读取文件，完成后创建一个新的 Image 对象，并将读取的结果作为图片的 src 属性，当图像加载完成后，通过访问 this.width、this.height 和 file.size 属性来获取图片的宽度、高度和大小。

另一个示例是使用 jQuery 来完成相同的任务，代码如下所示：

var file = $('#file')[0].files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
  var img = $('<img>').attr('src', e.target.result);
  img.on('load', function() {
    var width = this.width;
    var height = this.height;
    var size = file.size;
    console.log('宽度：' + width + 'px');
    console.log('高度：' + height + 'px');
    console.log('大小：' + size + 'bytes');
  });
};

在这个示例中，首先使用 jQuery 获取 file 控件中的文件，并使用 FileReader 对象读取文件。然后创建一个新的 img 元素，并将读取的结果作为图片的 src 属性，当图像加载完成后，通过访问 this.width、this.height 和 file.size 属性来获取图片的宽度、高度和大小，并在控制台中输出。

以上是获取 file 控件中图片宽高与大小的完整攻略，希望对你有所帮助。