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

新手上路,请多包涵

我正在阅读这个 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 文件系统 api 做同样的事情?

更新

我可以这样做( 演示):

 <!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 进行验证会更好

原文由 Martin Borthiry 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 619
2 个回答

我可以这样做( 演示):

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

原文由 Martin Borthiry 发布,翻译遵循 CC BY-SA 3.0 许可协议

在 React js 中你可以这样执行

const handleFileUpload = (e) => {
    let file = e.target.files[0];
    let fileType = file.type; // image/jpeg
    let fileSize = file.size; // 3MB

    if (fileSize > 5 * 1000000) {
      // fileSize > 5MB then show popup message
      alert(
        `File size is too large, please upload image of size less than 5MB.\nSelected File Size: ${
          fileSize / 1000000
        }MB only`
      );
      return;
    }
  };

 <input
        type="file"
        accept="image/*"
        title="upload file smaller than 5MB"
        placeholder="upload file smaller than 3MB"
        onChange={handleChange}
      />

原文由 Jagannath Swarnkar 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题