html - formulario - <input type="file"> limite de archivos seleccionables por extensiones

input type file javascript

Question

Esta pregunta ya tiene una respuesta aquí:

• Limitar el formato de archivo cuando se usa <input type = "file">? 9 respuestas

¿Cómo alguien puede limitar los archivos que se pueden seleccionar con el elemento input type = "file" por extensiones ...?

Ya conozco el atributo accept, pero en Chrome limita los archivos por el último tipo MIME definido (en este caso, "gif") y FF4 ni siquiera limita nada.

<input type="file" accept="image/jpg, image/gif">

estoy haciendo algo mal? ¿O hay otra manera?

Thy por cualquier consejo ...

Answer 1

Honestamente, la mejor manera de limitar los archivos está en el lado del servidor. Las personas pueden falsificar el tipo de archivo en el cliente, por lo que tomar el nombre completo del archivo en el momento de la transferencia del servidor, analizar el tipo de archivo y luego devolver un mensaje suele ser la mejor opción.

Answer 2

La forma más fácil de hacerlo sería:

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

Funciona con todos los navegadores, excepto IE9. No lo he probado en IE10 +.

Answer 3

NOTA: Esta respuesta es de 2011. Fue una muy buena respuesta en aquel momento, pero a partir de 2015, las propiedades nativas de HTML son compatibles con la mayoría de los navegadores, por lo que (por lo general) no es necesario implementar dicha lógica personalizada en JS. Vea la respuesta de Edi y los documentos .

Antes de que se cargue el archivo, puede verificar la extensión del archivo utilizando Javascript e impedir que se envíe el formulario si no coincide. El nombre del archivo que se cargará se almacena en el campo "valor" del elemento de formulario.

Aquí hay un ejemplo simple que solo permite subir archivos que terminan en ".gif":

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

Sin embargo, este método no es infalible. Sean Haddy tiene razón en que siempre quiere verificar el lado del servidor, ya que los usuarios pueden vencer su comprobación de Javascript desactivando JavaScript o editando su código una vez que llega a su navegador. Definitivamente verifique el lado del servidor además de la verificación del lado del cliente. También recomiendo comprobar el tamaño del servidor, para que los usuarios no bloqueen el servidor con un archivo de 2 GB (no hay forma de que yo sepa de verificar el tamaño del archivo en el lado del cliente sin usar Flash o un applet de Java o algo así )

Sin embargo, revisar el lado del cliente de antemano utilizando el método que he dado aquí sigue siendo útil, ya que puede evitar errores y es un impedimento menor para las travesuras no graves.

Answer 4

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

      }

intenté esto, funciona muy bien