如何通过javascript了解要上传的图像的大小？

Question

如何通过javascript了解要上传的图像的大小？

我的网站上有一个网页,用户可以上传图片.我想将要上传的图片的限制设置为2mb.目前它上传所有尺寸的图像.如果图片小于2mb,它将沿正常路径前进并上传,如果大于2mb,则弹出窗口应显示错误消息.任何人都可以帮助我如何单独使用javascript？任何帮助,将不胜感激.谢谢!

Answer 1

T.J*_*der 5

您可以在支持它的浏览器上使用新的File API(是的,真的),这基本上是IE9及更早版本之外的任何东西.在安装了Flash的浏览器上也可以通过Flash进行此类操作,因此您可以进行一系列检查(浏览器是否支持File API？是的,使用它;不,是否有Flash？是的,使用它;不......)请注意,无论您在客户端执行什么操作,都必须在服务器上强制执行限制,因为您无法依赖任何客户端验证.

重新启动File API,它是size文件输入files集合中文件条目的属性.以下是如何检查文件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>

Run Code Online (Sandbox Code Playgroud)

(这是根据我在StackOverflow上关于图像尺寸的另一个问题的答案改编的.)

但是,您不能指望这个或任何其他客户端验证.您还必须强制执行限制服务器端.

归档时间：	15 年前
查看次数：	1646 次
最近记录：	9 年，8 月前