1. PingCode智库首页
  2. 百科

js怎么获取上传图片的 宽高

Edit1 • • 百科

js怎么获取上传图片的 宽高

获取上传图片的宽高可以通过以下几种方式：使用 JavaScript 的 FileReader 对象、创建一个 Image 对象、监听其 load 事件。详细描述如下：

  1. FileReader对象：FileReader 对象允许网页中的 JavaScript 读取用户本地文件（或原始数据缓冲区）的内容。通过 FileReader 读取图片数据并创建一个 Image 对象，可以获取图片的宽高。
  2. Image对象：创建一个新的 Image 对象，用读取的图片数据作为其 src 属性，通过监听 load 事件来获取图片的宽高。
  3. load事件监听：在图片加载完成后，通过监听 load 事件，可以确保图片已经完全加载，然后获取其宽高。

下面将具体分步骤说明和展示代码示例。

一、文件选择和读取

1、用户选择文件

首先需要用户选择文件，可以通过一个文件输入框实现：

<input type="file" id="fileInput" />

2、读取文件

通过 JavaScript 获取文件并读取其内容：

document.getElementById('fileInput').addEventListener('change', function(event) {


    const file = event.target.files[0];


    if (file) {


        const reader = new FileReader();


        reader.onload = function(e) {


            const img = new Image();


            img.src = e.target.result;


            img.onload = function() {


                const width = img.width;


                const height = img.height;


                console.log(`Width: ${width}, Height: ${height}`);


            };


        };


        reader.readAsDataURL(file);


    }


});

二、详细解析和优化

1、FileReader对象的使用

FileReader 对象通过其 readAsDataURL 方法读取文件并转换为 Base64 编码的 URL 字符串。FileReader 的 onload 事件在读取完成后触发：

const reader = new FileReader();


reader.onload = function(e) {


    const img = new Image();


    img.src = e.target.result;


    img.onload = function() {


        const width = img.width;


        const height = img.height;


        console.log(`Width: ${width}, Height: ${height}`);


    };


};


reader.readAsDataURL(file);

2、Image对象和load事件的使用

创建 Image 对象并设置其 src 属性为 FileReader 读取的结果。通过监听 load 事件确保图片完全加载：

const img = new Image();


img.src = e.target.result;


img.onload = function() {


    const width = img.width;


    const height = img.height;


    console.log(`Width: ${width}, Height: ${height}`);


};

3、错误处理

在实际应用中，添加错误处理是非常重要的。例如，如果文件不是图像文件，或者读取文件发生错误，应该给予用户友好的提示：

document.getElementById('fileInput').addEventListener('change', function(event) {


    const file = event.target.files[0];


    if (file) {


        if (!file.type.startsWith('image/')) {


            console.error('Selected file is not an image.');


            return;


        }


        const reader = new FileReader();


        reader.onerror = function() {


            console.error('Error reading file.');


        };


        reader.onload = function(e) {


            const img = new Image();


            img.src = e.target.result;


            img.onload = function() {


                const width = img.width;


                const height = img.height;


                console.log(`Width: ${width}, Height: ${height}`);


            };


            img.onerror = function() {


                console.error('Error loading image.');


            };


        };


        reader.readAsDataURL(file);


    }


});

三、综合实例

结合上述所有步骤，提供一个完整的、经过优化的代码实例：

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>Image Upload</title>


</head>


<body>


    <input type="file" id="fileInput" />


    <div id="output"></div>


    <script>


        document.getElementById('fileInput').addEventListener('change', function(event) {


            const file = event.target.files[0];


            if (file) {


                if (!file.type.startsWith('image/')) {


                    console.error('Selected file is not an image.');


                    return;


                }


                const reader = new FileReader();


                reader.onerror = function() {


                    console.error('Error reading file.');


                };


                reader.onload = function(e) {


                    const img = new Image();


                    img.src = e.target.result;


                    img.onload = function() {


                        const width = img.width;


                        const height = img.height;


                        document.getElementById('output').textContent = `Width: ${width}, Height: ${height}`;


                    };


                    img.onerror = function() {


                        console.error('Error loading image.');


                    };


                };


                reader.readAsDataURL(file);


            }


        });


    </script>


</body>


</html>

四、进一步优化

1、跨浏览器兼容性

确保代码在不同浏览器中的兼容性非常重要。现代浏览器普遍支持 FileReader 和 Image 对象，但在使用前最好进行兼容性检查：

if (window.FileReader && window.Image) {


    // Proceed with file reading and image handling


} else {


    console.error('FileReader or Image is not supported in this browser.');


}

2、用户体验优化

在文件读取和图片加载过程中，可以添加加载指示器或者禁用文件输入框，提升用户体验：

const fileInput = document.getElementById('fileInput');


const output = document.getElementById('output');


fileInput.addEventListener('change', function(event) {


    const file = event.target.files[0];


    if (file) {


        if (!file.type.startsWith('image/')) {


            output.textContent = 'Selected file is not an image.';


            return;


        }


        const reader = new FileReader();


        reader.onerror = function() {


            output.textContent = 'Error reading file.';


        };


        reader.onload = function(e) {


            output.textContent = 'Loading image...';


            const img = new Image();


            img.src = e.target.result;


            img.onload = function() {


                const width = img.width;


                const height = img.height;


                output.textContent = `Width: ${width}, Height: ${height}`;


            };


            img.onerror = function() {


                output.textContent = 'Error loading image.';


            };


        };


        reader.readAsDataURL(file);


    }


});

通过这些步骤和优化，您可以准确获取用户上传图片的宽高，并确保代码的鲁棒性和用户体验。

相关问答FAQs：

1. 如何使用JavaScript获取上传图片的宽高？
JavaScript提供了一种简单的方法来获取上传图片的宽高。下面是一个示例代码：

<input type="file" id="uploadImage" onchange="getImageSize()">

<script>
function getImageSize() {
  const input = document.getElementById('uploadImage');
  const file = input.files[0];
  const img = new Image();

  img.onload = function() {
    const width = img.width;
    const height = img.height;
    console.log("上传图片的宽度：" + width + " 像素");
    console.log("上传图片的高度：" + height + " 像素");
  };

  img.src = URL.createObjectURL(file);
}
</script>

2. 如何通过JavaScript判断上传的图片是否符合指定的宽高要求？
如果您想要判断上传的图片是否符合指定的宽高要求，您可以在获取图片宽高后，进行判断。以下是一个示例代码：

<input type="file" id="uploadImage" onchange="checkImageSize()">

<script>
function checkImageSize() {
  const input = document.getElementById('uploadImage');
  const file = input.files[0];
  const img = new Image();
  const desiredWidth = 800; // 指定的宽度
  const desiredHeight = 600; // 指定的高度

  img.onload = function() {
    const width = img.width;
    const height = img.height;

    if (width === desiredWidth && height === desiredHeight) {
      console.log("上传图片符合要求");
    } else {
      console.log("上传图片不符合要求");
    }
  };

  img.src = URL.createObjectURL(file);
}
</script>

3. 如何使用JavaScript在网页中显示上传图片的宽高？
如果您想要在网页中显示上传图片的宽高，可以使用JavaScript来实现。以下是一个示例代码：

<input type="file" id="uploadImage" onchange="displayImageSize()">

<div id="imageSize"></div>

<script>
function displayImageSize() {
  const input = document.getElementById('uploadImage');
  const file = input.files[0];
  const img = new Image();

  img.onload = function() {
    const width = img.width;
    const height = img.height;
    const imageSizeElement = document.getElementById('imageSize');
    imageSizeElement.innerHTML = "上传图片的宽度：" + width + " 像素<br>上传图片的高度：" + height + " 像素";
  };

  img.src = URL.createObjectURL(file);
}
</script>

希望以上解答对您有所帮助！如果您还有其他问题，请随时提问。

文章包含AI辅助创作，作者：Edit1，如若转载，请注明出处：https://docs.pingcode.com/baike/3741277

赞 (0)
Edit1Edit1
免费注册
电话联系

4008001024

微信咨询
微信咨询
返回顶部