Ověření přípony souboru před nahráním souboru

Nahrávám obrázky na servlet. Ověření, zda je nahraný soubor obrázkem, se provádí pouze na straně serveru kontrolou magických čísel v záhlaví souboru. Existuje nějaký způsob, jak ověřit rozšíření na straně klienta před odesláním formuláře na servlet? Jakmile stisknu enter, začne se nahrávat.

Na straně klienta používám Javascript a jQuery.

Aktualizace: Nakonec jsem skončil s validací na straně serveru, která čte bajty a odmítá upload, pokud to není obrázek.

Odpověď

Je možné zkontrolovat pouze příponu souboru, ale uživatel může snadno přejmenovat virus.exe na virus.jpg a „předat“ ověření.

Co stojí za to, zde je kód pro kontrolu přípony souboru a přerušení, pokud nesplňuje jednu z platných přípon:(vyberte neplatný soubor a zkuste odeslat, abyste viděli upozornění v akci)

var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];    
function Validate(oForm) {
    var arrInputs = oForm.getElementsByTagName("input");
    for (var i = 0; i < arrInputs.length; i++) {
        var oInput = arrInputs[i];
        if (oInput.type == "file") {
            var sFileName = oInput.value;
            if (sFileName.length > 0) {
                var blnValid = false;
                for (var j = 0; j < _validFileExtensions.length; j++) {
                    var sCurExtension = _validFileExtensions[j];
                    if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                        blnValid = true;
                        break;
                    }
                }
                
                if (!blnValid) {
                    alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                    return false;
                }
            }
        }
    }
  
    return true;
}

<form onsubmit="return Validate(this);">
  File: <input type="file" name="my file" /><br />
  <input type="submit" value="Submit" />
</form>

Všimněte si, že kód uživateli umožní odeslat bez výběru souboru… pokud je to vyžadováno, odstraňte řádek if (sFileName.length > 0) { a je to přidružená uzavírací závorka. Kód ověří jakýkoli vstup souboru ve formuláři bez ohledu na jeho název.

To lze provést pomocí jQuery v menším počtu řádků, ale „surový“ JavaScript mi ​​vyhovuje a konečný výsledek je stejný.

V případě, že máte více souborů nebo chcete spustit kontrolu při změně souboru a nejen při odesílání formuláře, použijte místo toho tento kód:

var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];    
function ValidateSingleInput(oInput) {
    if (oInput.type == "file") {
        var sFileName = oInput.value;
         if (sFileName.length > 0) {
            var blnValid = false;
            for (var j = 0; j < _validFileExtensions.length; j++) {
                var sCurExtension = _validFileExtensions[j];
                if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                    blnValid = true;
                    break;
                }
            }
             
            if (!blnValid) {
                alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                oInput.value = "";
                return false;
            }
        }
    }
    return true;
}

File 1: <input type="file" name="file1" onchange="ValidateSingleInput(this);" /><br />
File 2: <input type="file" name="file2" onchange="ValidateSingleInput(this);" /><br />
File 3: <input type="file" name="file3" onchange="ValidateSingleInput(this);" /><br />

Toto zobrazí upozornění a resetuje vstup v případě neplatné přípony souboru.