js获取上传本地图片的宽高

在JavaScript中，你可以使用FileReader API来读取用户上传的本地图片文件，并通过HTML5的Canvas元素来获取图片的宽度和高度。以下是一个简单的步骤示例：

1. 创建一个input元素让用户选择图片文件：

<input type="file" id="imageInput" accept="image/*" />

2. 为这个输入添加事件监听器，在用户选择图片后处理文件：

document.getElementById('imageInput').addEventListener('change', function(e) {
    var file = e.target.files[0];
    readImage(file);
});

3. 定义`readImage`函数，处理文件读取和图片尺寸获取：

function readImage(file) {
    var reader = new FileReader();
    reader.onload = function(event) {
        var img = new Image();
        img.src = event.target.result; // 使用FileReader返回的URL加载图片

        img.onload = function() {
            // 图片加载完成后获取宽高
            var width = img.width;
            var height = img.height;
            console.log('图片宽度:', width, '像素');
            console.log('图片高度:', height, '像素');
        };
    };

    reader.readAsDataURL(file); // 读取文件内容并转换为data URL
}

在这个例子中，当图片加载完毕，你会得到它的宽度和高度。