是否可以在 html5 中验证 input=file 的大小和类型答案

【问题标题】：Is it possible to validate the size and type of input=file in html5是否可以在 html5 中验证 input=file 的大小和类型
【发布时间】：2012-01-02 23:10:17
【问题描述】：

我正在阅读这个http://dev.w3.org/html5/markup/input.file.html，但我只找到了“accept”属性。

我试过了

<input type="file" name="imagefilename" accept="image/x-png, image/gif, image/jpeg" />

是否可以在客户端验证文件大小？

我为 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>

是否可以使用 html5 filesystem api 做同样的事情？

更新

我可以这样做 (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>

它工作正常，但我认为它会更好地验证原生 html5 attr

【问题讨论】：

this.files[0].fileSize => this.files[0].size

标签： html validation file-io

【解决方案1】：

    <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>

http://jsfiddle.net/9bhcB/2/

【讨论】：

谢谢，但我已经做了一个通用的解决方案。
@Sergey Gospodarets 不错的分析器，适用于我的代码。问题，我怎样才能检查文件的类型？我尝试类似alert('type'+fileInput.get(0).files[0].type); 但没有结果。不幸的是，控制台中没有错误。谢谢
@LasseEspeholt .fileSize 已弃用，但我使用 .size 代替，这是有效的（w3.org/TR/FileAPI）
@slevin .type 应该可以工作。工作演示codepen.io/malyw/pen/nyvEt 检查stackoverflow.com/questions/11182968/… 以了解，当.type 可以返回一个空字符串。
@SergeyGospodarets 对不起，这个评论是错误的答案。我很抱歉。

【解决方案2】：

我可以这样做 (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>

【讨论】：

根据 developer.mozilla.org/en-US/docs/Web/API/File.fileSize ，fileSize 已被弃用。相反，每个人都应该使用size。

【解决方案3】：

如果您使用 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();
}

【讨论】：