JavaScript文件上传大小验证

一尘不染

JavaScript文件上传大小验证

javascript

在使用JavaScript上传文件之前，有什么方法可以检查 文件大小 吗？

阅读 283

2020-04-25

共1个答案

一尘不染

是的，有些现代浏览器支持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，则向他们发送友好的消息（因此，他们不会花费所有的时间仅将结果扔在服务器上），但是您
也必须在服务器上实施该限制，因为可以规避所有客户端限制（和其他验证）。

2020-04-25