JavaScript文件上传大小验证 [英] JavaScript file upload size validation
问题描述
有没有什么办法在使用JavaScript上传之前检查文件大小？
strong>是，W3C有一项新功能，它受到一些现代浏览器的支持，文件API 。它可以用于这个目的，而且很容易测试它是否被支持，如果不是这样，它会退回到另一个机制。例如： <！DOCTYPE HTML>
< html>
< head>
< meta http-equiv =Content-typecontent =text / html; charset = UTF-8>
< title>显示档案资料< / title>
< style type ='text / css'>
body {
font-family：sans-serif;
}
< / style>
< script type ='text / javascript'>
function showFileSize（）{
var input，file;
（不能使用`typeof FileReader ===function`因为显然是
//在某些浏览器上它会回到object，那么看看它是否存在
//。）
if（！window.FileReader）{
bodyAppend（p，该浏览器不支持该文件API）;
return;
}
input = document.getElementById（'fileinput'）;
if（！input）{
bodyAppend（p，嗯，找不到fileinput元素。
else if（！input.files）{
bodyAppend（p，这个浏览器似乎不支持文件输入的`files`属性。
else if（！input.files [0]）{
bodyAppend（p，请在点击'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，并且如果它是（所以他们不会花费所有时间上传，只是为了得到在服务器上抛出的结果），但是你必须也在服务器上执行这个限制，因为所有的客户端限制（和其他验证）可以规避。
Is there any way to check file size before uploading it using JavaScript?
Yes, there's a new feature from the W3C that's supported by some modern browsers, the File API. It can be used for this purpose, and it's easy to test whether it's supported and fall back (if necessary) to another mechanism if it isn't.
Here's a complete example:
<!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>
And here it is in action. Try that with a recent version of Chrome or Firefox.
Slightly off-topic, but: Note that client-side validation is no substitute for server-side validation. Client-side validation is purely to make it possible to provide a nicer user experience. For instance, if you don't allow uploading a file more than 5MB, you could use client-side validation to check that the file the user has chosen isn't more than 5MB in size and give them a nice friendly message if it is (so they don't spend all that time uploading only to get the result thrown away at the server), but you must also enforce that limit at the server, as all client-side limits (and other validations) can be circumvented.
这篇关于JavaScript文件上传大小验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
