Existuje nejaký spôsob, ako skontrolovať veľkosť súboru pred jeho odoslaním pomocou JavaScriptu?
Ano, existuje nová funkcia od W3C, ktorú podporujú niektoré moderné prehliadače, File API. Možno ju použiť na tento účel a je ľahké otestovať, či je podporovaná, a v prípade, že nie je, vrátiť sa (ak je to potrebné) k inému mechanizmu.
Tu je kompletný príklad:
<!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>
A tu je to v akcii. Vyskúšajte to s najnovšou verziou prehliadača Chrome alebo Firefox.
Trochu mimo témy, ale: Všimnite si, že validácia na strane klienta nie je náhradou validácie na strane servera. Validácia na strane klienta slúži výlučne na to, aby bolo možné poskytnúť príjemnejšie používateľské prostredie. Ak napríklad nepovolíte nahrávanie súboru väčšieho ako 5 MB, môžete použiť validáciu na strane klienta na kontrolu, či súbor, ktorý si používateľ vybral, nemá veľkosť väčšiu ako 5 MB, a ak má (aby netrávil celý čas nahrávaním len preto, aby bol výsledok na serveri vyhodený), ale musíte tiež tento limit vynútiť na serveri, pretože všetky limity na strane klienta (a iné validácie) sa dajú obísť.
Nie Áno, pomocou File API v novších prehliadačoch. Podrobnosti nájdete v odpovedi TJ'a.
Ak potrebujete podporovať aj staršie prehliadače, budete na to musieť použiť uploader založený na technológii Flash, napríklad SWFUpload alebo Uploadify.
Ukážka SWFUpload Features Demo ukazuje, ako funguje nastavenie file_size_limit
.
Všimnite si, že to (samozrejme) vyžaduje Flash, navyše spôsob, akým to funguje, je trochu odlišný od bežných formulárov na odosielanie.
Môžete vyskúšať tento fineuploader
Funguje to dobre v IE6(a vyšších), Chrome alebo Firefox