在使用JavaScript上传 文件 之前,有什么方法可以检查 文件大小 吗?
是的 ,有些现代浏览器支持W3C的一项新功能[FileAPI。可以将其用于此目的,并且很容易测试它是否受支持,如果不支持,则可以回退到其他机制(如果需要)。
这是一个完整的示例:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> <title>Show File Data</title> <style type='text/css'> body { font-family: sans-serif; } </style> <script type='text/javascript'> function showFileSize() { var input, file; // (Can't use `typeof FileReader === "function"` because apparently // it comes back as "object" on some browsers. So just see if it's there // at all.) if (!window.FileReader) { bodyAppend("p", "The file API isn't supported on this browser yet."); return; } input = document.getElementById('fileinput'); if (!input) { bodyAppend("p", "Um, couldn't find the fileinput element."); } else if (!input.files) { bodyAppend("p", "This browser doesn't seem to support the `files` property of file inputs."); } else if (!input.files[0]) { bodyAppend("p", "Please select a file before clicking 'Load'"); } else { file = input.files[0]; bodyAppend("p", "File " + file.name + " is " + file.size + " bytes in size"); } } function bodyAppend(tagName, innerHTML) { var elm; elm = document.createElement(tagName); elm.innerHTML = innerHTML; document.body.appendChild(elm); } </script> </head> <body> <form action='#' onsubmit="return false;"> <input type='file' id='fileinput'> <input type='button' id='btnLoad' value='Load' onclick='showFileSize();'> </form> </body> </html>
而这里是它的行为。尝试使用最新版本的Chrome或Firefox。
稍微偏离主题,但是:请注意,客户端验证不能替代服务器端验证。客户端验证纯粹是为了提供更好的用户体验。例如,如果您不允许上传的文件超过5MB,则可以使用客户端验证来检查用户选择的文件大小是否超过5MB,如果文件大小超过5MB,则向他们发送友好的消息(因此,他们不会花费所有的时间仅将结果扔在服务器上),但是您 也 必须在服务器上实施该限制,因为可以规避所有客户端限制(和其他验证)。