Html 是否可以在 html5 中验证 input=file 的大小和类型
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8212041/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to validate the size and type of input=file in html5
提问by Martin Borthiry
I was reading this http://dev.w3.org/html5/markup/input.file.html, but I only found the "accept" attribute.
我正在阅读这个http://dev.w3.org/html5/markup/input.file.html，但我只找到了“接受”属性。
I tried this
我试过这个
<input type="file" name="imagefilename" accept="image/x-png, image/gif, image/jpeg" />
Is it possible client-side validation of file size?
是否可以在客户端验证文件大小？
I found this technique for IE
我为 IE 找到了这种技术
<html>
<head>
<script>
function getSize()
{
var myFSO = new ActiveXObject("Scripting.FileSystemObject");
var filepath = document.upload.file.value;
var thefile = myFSO.getFile(filepath);
var size = thefile.size;
alert(size + " bytes");
}
</script>
</head>
<body>
<form name="upload">
<input type="file" name="file">
<input type="button" value="Size?" onClick="getSize();">
</form>
</body>
</html>
Is it possible to do the same using html5 filesystem api?
是否可以使用html5 文件系统 api做同样的事情？
UPDATE
更新
I could do this (demo):
我可以这样做（演示）：
<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</head>
<body>
<form >
<input type=file id=f max-size=32154 >
<input type=submit>
</form>
<script>
$(function(){
$('form').submit(function(){
var isOk = true;
$('input[type=file][max-size]').each(function(){
if(typeof this.files[0] !== 'undefined'){
var maxSize = parseInt($(this).attr('max-size'),10),
size = this.files[0].fileSize;
isOk = maxSize > size;
return isOk;
}
});
return isOk;
});
});
</script>
</body>
It is working fine, but I think It will be better to a native html5 attr to validate
它工作正常，但我认为最好使用本机 html5 attr 来验证
采纳答案by Martin Borthiry
I could do this (demo):
我可以这样做（演示）：
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</head>
<body>
<form >
<input type="file" id="f" data-max-size="32154" />
<input type="submit" />
</form>
<script>
$(function(){
$('form').submit(function(){
var isOk = true;
$('input[type=file][data-max-size]').each(function(){
if(typeof this.files[0] !== 'undefined'){
var maxSize = parseInt($(this).attr('max-size'),10),
size = this.files[0].size;
isOk = maxSize > size;
return isOk;
}
});
return isOk;
});
});
</script>
</body>
</html>
回答by Serg Hospodarets
<form class="upload-form">
<input class="upload-file" data-max-size="2048" type="file" >
<input type=submit>
</form>
<script>
$(function(){
var fileInput = $('.upload-file');
var maxSize = fileInput.data('max-size');
$('.upload-form').submit(function(e){
if(fileInput.get(0).files.length){
var fileSize = fileInput.get(0).files[0].size; // in bytes
if(fileSize>maxSize){
alert('file size is more then' + maxSize + ' bytes');
return false;
}else{
alert('file size is correct- '+fileSize+' bytes');
}
}else{
alert('choose file, please');
return false;
}
});
});
</script>
回答by olegnaopmaco
if your using php for the backend maybe you can use this code.
如果您在后端使用 php，也许您可以使用此代码。
// Validate image file size
if (($_FILES["file-input"]["size"] > 2000000)) {
$msg = "Image File Size is Greater than 2MB.";
header("Location: ../product.php?error=$msg");
exit();
}
