Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
304 views
in Technique[技术] by (71.8m points)

javascript - JavaScript文件上传大小验证(JavaScript file upload size validation)

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

  ask by ArK translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Yes , there's a new feature from the W3C that's supported by some modern browsers, the File API .

(是的 ,某些现代浏览器支持W3C的一项新功能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.

(尝试使用最新版本的Chrome或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.

(例如,如果您不允许上传的文件超过5MB,则可以使用客户端验证来检查用户选择的文件大小是否超过5MB,如果文件大小超过5MB,则向他们发送友好的消息(因此,他们不会花所有时间上传文件只是为了扔掉服务器上的结果),但是您必须在服务器上实施该限制,因为可以规避所有客户端限制(和其他验证)。)


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...