javascript如何知道要上传的图片大小？答案

【问题标题】：How to know the size of the image to be uploaded with javascript?javascript如何知道要上传的图片大小？
【发布时间】：2011-05-08 07:57:49
【问题描述】：

我的网站上有一个网页，用户可以上传图片。我想设置上传图片的上限为 2mb。目前它上传各种尺寸的图像。如果图片小于 2mb，它将沿着正常路径上传，如果大于 2mb，则弹出窗口应显示错误消息。任何人都可以帮助我如何仅使用 javascript 来做到这一点吗？任何帮助，将不胜感激。谢谢！

【问题讨论】：

标签： javascript

【解决方案1】：

您可以在支持它的浏览器上使用新的File API（是的，真的），即basically anything except IE9 and earlier。这种事情也可以通过安装了 Flash 的浏览器上的 Flash 进行，因此您可以进行级联检查（浏览器是否支持 File API？是的，使用它；不，它有 Flash 吗？是的，使用它；不...）。请注意，无论您在客户端做什么，您必须还强制执行服务器上的限制，因为您永远不能指望任何客户端验证.

关于文件 API，它是文件输入的 files 集合中文件的条目上的 size 属性。以下是您如何检查是否支持 File API 并使用它在适当配备的浏览器上获取文件大小：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Show File Size</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
</style>
<script type='text/javascript'>

    function showFileSize() {
        var input, file;

        if (typeof window.FileReader !== 'function') {
            write("The file API isn't supported on this browser yet.");
            return;
        }

        input = document.getElementById('filename');
        if (!input) {
            write("Um, couldn't find the filename element.");
        }
        else if (!input.files) {
            write("This browser doesn't seem to support the `files` property of file inputs.");
        }
        else if (!input.files[0]) {
            write("Please select a file before clicking 'Show Size'");
        }
        else {
            file = input.files[0];
            write("The size of file '" + file.name + "' is " + file.size + " bytes");
        }

        function write(msg) {
            var p = document.createElement('p');
            p.innerHTML = msg;
            document.body.appendChild(p);
        }
    }

</script>
</head>
<body>
<form action='#' onsubmit="return false;">
<input type='file' id='filename'>
<input type='button' id='btnShowSize' value='Show Size' onclick='showFileSize();'>
</form>
</body>
</html>

（改编自 my answer to this other question 在 StackOverflow 上关于图像尺寸的内容。）

同样，您不能指望此验证或任何其他客户端验证。您必须还强制执行服务器端限制。

【讨论】：