ograniczanie plików do wyboru przez rozszerzenia [duplikat]

Łatwym sposobem na zrobienie tego byłoby:

<input type="file" accept=".gif,.jpg,.jpeg,.png,.doc,.docx">

Działa ze wszystkimi przeglądarkami, z wyjątkiem IE9. Nie testowałem go w IE10+.

Uwaga: Ta odpowiedź pochodzi z 2011 roku. to była wtedy naprawdę dobra odpowiedź, ale od 2015 roku natywne właściwości HTML są obsługiwane przez większość przeglądarek, więc nie ma (zazwyczaj) potrzeby implementowania takiej niestandardowej logiki w JS. Zobacz odpowiedź Edi i dokumenty .

Zanim plik zostanie przesłany, możesz sprawdzić rozszerzenie pliku za pomocą Javascript i zapobiec wysyłaniu formularza, jeśli nie pasuje. Nazwa pliku do przesłania jest zapisana w "wartości" pole elementu formularza.

Oto prosty przykład, który pozwala tylko na pliki, które kończą się".gif" do uploadu:

<script type="text/javascript">
    function checkFile() {
        var fileElement = document.getElementById("uploadFile");
        var fileExtension = "";
        if (fileElement.value.lastIndexOf(".") > 0) {
            fileExtension = fileElement.value.substring(fileElement.value.lastIndexOf(".") + 1, fileElement.value.length);
        }
        if (fileExtension.toLowerCase() == "gif") {
            return true;
        }
        else {
            alert("You must select a GIF file for upload");
            return false;
        }
    }
</script>

<form action="upload.aspx" enctype="multipart/form-data" onsubmit="return checkFile();">
    <input name="uploadFile" id="uploadFile" type="file" />

    <input type="submit" />
</form>

Jednak sprawdzanie strony klienta przed ręką za pomocą metody, którą podałem tutaj, jest nadal przydatne, ponieważ może zapobiec błędom i jest niewielkim odstraszaczem do nie poważnych zgorszeń.

 function uploadFile() {
     var fileElement = document.getElementById("fileToUpload");
        var fileExtension = "";
        if (fileElement.value.lastIndexOf(".") > 0) {
            fileExtension = fileElement.value.substring(fileElement.value.lastIndexOf(".") + 1, fileElement.value.length);
        }
        if (fileExtension == "odx-d"||fileExtension == "odx"||fileExtension == "pdx"||fileExtension == "cmo"||fileExtension == "xml") {
         var fd = new FormData();
        fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEve`enter code here`ntListener("abort", uploadCanceled, false);
        xhr.open("POST", "/post_uploadReq");
        xhr.send(fd);
        }
        else {
            alert("You must select a valid odx,pdx,xml or cmo file for upload");
            return false;
        }

      }

Próbowałem tego, działa bardzo dobrze