我的网站上有一个网页，用户可以在其中上传图片。我想将要上传的图片限制设置为 2mb。目前它上传各种尺寸的图像。如果图片小于 2mb，它将沿着正常路径上传，如果大于 2mb，弹出窗口应显示错误消息。任何人都可以帮助我如何单独使用 javascript 来做到这一点？任何帮助，将不胜感激。 谢谢!
最佳答案
您可以使用新的 File API (是的，真的)在支持它的浏览器上，即 basically anything except IE9 and earlier .在安装了 Flash 的浏览器上也可以通过 Flash 执行此类操作，因此您可以进行一系列检查(浏览器是否支持文件 API？是的，使用它；不，它是否具有 Flash？是的，使用它；不……)。请注意，无论您在客户端做什么，您都必须同时在服务器上执行限制，因为您永远不能指望任何客户端验证.
对于文件 API，它是文件输入的 files 集合中文件条目的 size 属性。以下是检查文件 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>
(改编自 StackOverflow 上关于图像尺寸的 my answer to this other question。)
不过，您不能指望此验证或任何其他客户端验证。您还必须在服务器端实现限制。
关于javascript - 如何知道要用javascript上传的图像的大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4152365/