Há alguma forma de verificar ** tamanho do ficheiro*** antes de o carregar usando o JavaScript?
Sim, lá's uma nova funcionalidade do W3C que's suportada por alguns browsers modernos, a File API. Ela pode ser usada para este propósito, e é fácil testar se ela's é suportada e cair de volta (se necessário) para outro mecanismo se ela for't.
Aqui's um exemplo completo:
<!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>
E aqui está em ação. Tente isso com uma versão recente do Chrome ou Firefox.
Ligeiramente fora de tópico, mas: Note que a validação do lado do cliente é não substitui a validação do lado do servidor. A validação do lado do cliente é puramente para tornar possível uma experiência mais agradável para o usuário. Por exemplo, se você não'não permitir o upload de um arquivo com mais de 5MB, você poderia usar a validação do lado do cliente para verificar se o arquivo que o usuário escolheu é'não tem mais de 5MB de tamanho e dar a eles uma mensagem amigável se for (então eles não'não gastam todo esse tempo fazendo upload apenas para ter o resultado jogado fora no servidor), mas você deve também impor esse limite no servidor, pois todos os limites do lado do cliente (e outras validações) podem ser contornados.
No Sim, usando a API de arquivos em navegadores mais recentes. Veja a resposta de TJ's para detalhes.
Se você precisa suportar navegadores mais antigos também, você terá que usar um uploader baseado em Flash como SWFUpload ou Uploadify para fazer isso.
A SWFUpload Features Demo mostra como funciona a configuração file_size_limit
.
Note que isto (obviamente) precisa de Flash, além de que a forma como funciona é um pouco diferente dos formulários de upload normais.
Você pode tentar este fineuploader
Funciona bem sob IE6(e acima), Chrome ou Firefox