Ověření velikosti nahrávaného souboru JavaScript

Existuje nějaký způsob, jak zkontrolovat velikost souboru než jej nahrajete pomocí JavaScriptu?

Odpověď

Ano , můžete k tomu použít File API.

Zde je úplný příklad (viz komentáře):

document.getElementById("btnLoad").addEventListener("click", function showFileSize() {
    // (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) { // This is VERY unlikely, browser support is near-universal
        console.log("The file API isn't supported on this browser yet.");
        return;
    }

    var input = document.getElementById('fileinput');
    if (!input.files) { // This is VERY unlikely, browser support is near-universal
        console.error("This browser doesn't seem to support the `files` property of file inputs.");
    } else if (!input.files[0]) {
        addPara("Please select a file before clicking 'Load'");
    } else {
        var file = input.files[0];
        addPara("File " + file.name + " is " + file.size + " bytes in size");
    }
});

function addPara(text) {
    var p = document.createElement("p");
    p.textContent = text;
    document.body.appendChild(p);
}

body {
    font-family: sans-serif;
}

<form action='#' onsubmit="return false;">
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load'>
</form>

Mírně mimo téma, ale:Upozorňujeme, že ověření na straně klienta nenahrazuje pro ověření na straně serveru. Ověření na straně klienta slouží čistě k tomu, aby bylo možné poskytovat příjemnější uživatelské prostředí. Pokud například nepovolíte nahrání souboru většího než 5 MB, můžete použít ověření na straně klienta a zkontrolovat, zda soubor, který si uživatel vybral, nemá velikost větší než 5 MB, a pokud ano, můžete mu dát příjemnou zprávu. (aby nestrávili všechen ten čas nahráváním jen proto, aby výsledek vyhodili na server), ale musíte také vynutit tento limit na serveru, protože všechny limity na straně klienta (a další ověření) lze obejít.