JavaScript bestand upload grootte validatie

Ja, er'is een nieuwe functie van de W3C die'door sommige moderne browsers wordt ondersteund, de File API. Het kan voor dit doel worden gebruikt, en het'is gemakkelijk om te testen of het'wordt ondersteund en terug te vallen (indien nodig) op een ander mechanisme als dat niet het geval is'is.

Hier's een compleet voorbeeld:




<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
Show File Data

body {
    font-family: sans-serif;
}

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



<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load' onclick='showFileSize();'>

En hier is het in actie. Probeer dat eens met een recente versie van Chrome of Firefox.

Beetje off-topic, maar: Merk op dat client-side validatie geen vervanging is voor server-side validatie. Client-side validatie is puur om het mogelijk te maken een mooiere gebruikerservaring te bieden. Als je bijvoorbeeld niet toestaat dat een bestand van meer dan 5MB wordt geüpload, zou je client-side validatie kunnen gebruiken om te controleren of het bestand dat de gebruiker heeft gekozen niet groter is dan 5MB en hen een vriendelijk bericht geven als dat wel zo is (zodat ze niet al die tijd besteden aan uploaden om het resultaat op de server weggegooid te krijgen), maar je moet ook die limiet op de server afdwingen, aangezien alle client-side limieten (en andere validaties) omzeild kunnen worden.