html - example - input type file size

HTML<input type=''file''> aplicar un filtro

Question

<input type=''file'' name=''userFile''>

ahora cuando haga clic en el botón Examinar, el cuadro de diálogo de navegación mostrará todos los archivos ... ¿qué ocurre si quiero filtrar tipos de archivos?

• solo imágenes o .png y .jpg & .gifs
• solo archivo de oficina como .doc y .docx y .pps

cómo hacerlo...

Answer 1

Creo que estás buscando el parámetro de aceptación. Prueba esto funciona

<input type="file" accept="image/*" />

Answer 2

Debe usar MIME_type : por ejemplo

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

esto solo aceptará el tipo de archivo *.xlsx ...

Para ver la lista de tipos de mime, consulte el siguiente enlace:
http://www.bitsandpix.com/entry/microsoft-office-2007-2010-docx-xlsx-pptx-mime-type-to-avoid-the-zip-issue/

Answer 3

Debes usar uno de los complementos que usan Flash embebido, ya que no puedes hacerlo con javascript normal

Answer 4

Hay un atributo "aceptar" en los controles de entrada de archivos, donde puede especificar los tipos de archivos que desea. Sin embargo, por lo que estoy viendo, a muchos navegadores les gusta ignorarlo: los tipos de archivos que se pueden especificar son MIME, por lo que un navegador estrictamente correcto debería examinar todos los archivos independientemente de la extensión y ver si se trata de una imagen ( y si es así, de qué tipo es).

Actualización: parece que al menos alguna versión de cada navegador principal en Windows ahora proporciona al menos algo de soporte para el atributo de accept . (Incluso IE lo admite, a partir de la versión 10.) Sin embargo, todavía es un poco temprano para confiar en él, ya que IE 8 y 9 aún no lo admiten. Y el apoyo en general es un poco irregular.

• Chrome parece tener soporte completo. Utiliza su propia lista incorporada de tipos, así como la del sistema ... así que si cualquiera define el tipo, Chrome sabe qué archivos mostrar.
• IE 10 es compatible con extensiones de archivos muy bien, y los tipos MIME decentemente. Sin embargo, parece usar solo el mapeo del sistema de tipo MIME a extensiones ... lo que básicamente significa que si algo en la computadora del usuario no registró esas extensiones con los tipos MIME correctos, IE no mostrará los archivos de esos tipos MIME.
• Parece que Opera solo admite tipos MIME, hasta el punto en que las extensiones realmente desactivan el filtro, y la IU del selector de archivos apesta. Debe seleccionar un tipo para ver los archivos de ese tipo.
• Parece que Firefox admite solo un conjunto limitado de tipos e ignora otros tipos además de extensiones.
• No tengo Safari, y no planeo descargarlo. Si alguien puede documentar el apoyo de Safari ... Soporte parcial en safari. http://caniuse.com/#search=accept

Debería considerar agregar el atributo, para que los navegadores que lo soportan puedan ayudar al usuario a encontrar los archivos correctos más fácilmente. Pero aún sugeriría que verifique el nombre del archivo después de que se haya seleccionado el archivo y muestre un mensaje de error si se carga un archivo con la extensión incorrecta.

Y, por supuesto, definitivamente haga que el servidor verifique dos veces que el archivo sea del tipo correcto. Las extensiones de archivo son solo una convención de nomenclatura y pueden subvertirse fácilmente. E incluso si pudiésemos confiar en el navegador (que no podemos), e incluso si intentara filtrar cosas como lo pedía (lo que podría no ser), la posibilidad de que realmente verifique que ese archivo .doc es realmente una palabra el documento está al lado de nil.

Answer 5

He hecho una manera fácil para la validación del lado del cliente para la mayoría de los casos en el filtrado de archivos. En realidad es bastante simple. Ahora, antes de ir e intentar implementar esto, comprenda que el servidor DEBE verificar este archivo, porque el filtrado de JavaScript y HTML no es seguro en los casos en que alguien altera el archivo .js o incluso el HTML. No incluyo todo el guión real por el simple hecho de que disfruto ver a otros implementar los conceptos usando una mente creativa, pero estos son los pasos que he dado que parecen funcionar hasta que encuentre una mejor respuesta:

Cree un objeto js que encuentre la entrada y la maneje.

Llame a una función, como OnClientUploadComplete para el control AsyncFileUpload de AjaxControlToolKit.

Dentro de esta función, declare una variable booleana: bIsAccepted (establecido en falso) y string sFileName (después de obtener el nombre de archivo de los argumentos).

En una declaración if..else,

if(sFilename.indexOf(".(acceptedExtension1)") ||
   sFileName.indexOf(".(AcceptedExtension2)") )
{
   bIsAccepted = true;
}
else
{
   bIsAccepted = false;
}

entonces

if(bIsAccepted)
{
//Process Data
}

En el servidor, la configuración de una lista de extensiones de archivos aceptadas, el procesamiento y el buclear de forma similar harán que el proceso sea coherente y consistente, permitiendo efectivamente que la UI y Code-Behind filtren los tipos de archivos en casi todas las situaciones.

Dado que esto puede omitirse cambiando el nombre para que tenga una extensión de archivo diferente como parte del nombre, el tipo de mimo también se debe verificar antes de enviarlo al servidor para su posterior procesamiento.

            [http://www.webmaster-toolkit.com/mime-types.shtml][1]

¡Espero que esto ayude!

Answer 6

No puede controlar qué archivos se pueden seleccionar, pero puede leer el nombre del archivo con javascript después de elegir el archivo. A continuación, podría mostrar una advertencia y / o desactivar el botón de enviar si el archivo es del tipo incorrecto. Sin embargo, recuerde que no puede confiar en la extensión para decirle si el archivo es realmente del tipo correcto o no. Solo se debe tratar como una forma de ayudar a los usuarios que de lo contrario perderían tiempo cargando un archivo enorme antes de descubrir que no es compatible con ese tipo de archivo.

Aquí hay un código de ejemplo para hacer eso. Utiliza jQuery, pero también podrías hacer lo mismo en javascript.

$(function() {
    $(''#inputId'').change( function() {
        var filename = $(this).val();
        if ( ! //.txt$/.test(filename)) {
            alert(''Please select a text file'');
        }
    });
});

Answer 7

Podría usar JavaScript. Tenga en cuenta que el gran problema al hacer esto con JavaScript es restablecer el archivo de entrada. Bueno, esto restringe a solo JPG (para otros formatos, tendrás que cambiar el tipo de mimo y el número mágico ):

<form id="form-id">
  <input type="file" id="input-id" accept="image/jpeg"/>
</form>

<script type="text/javascript">
    $(function(){
        $("#input-id").on(''change'', function(event) {
            var file = event.target.files[0];
            if(file.size>=2*1024*1024) {
                alert("JPG images of maximum 2MB");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            if(!file.type.match(''image/jp.*'')) {
                alert("only JPG images");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            var fileReader = new FileReader();
            fileReader.onload = function(e) {
                var int32View = new Uint8Array(e.target.result);
                //verify the magic number
                // for JPG is 0xFF 0xD8 0xFF 0xE0 (see https://en.wikipedia.org/wiki/List_of_file_signatures)
                if(int32View.length>4 && int32View[0]==0xFF && int32View[1]==0xD8 && int32View[2]==0xFF && int32View[3]==0xE0) {
                    alert("ok!");
                } else {
                    alert("only valid JPG images");
                    $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                    return;
                }
            };
            fileReader.readAsArrayBuffer(file);
        });
    });
</script>

Tenga en cuenta que esto fue probado en las últimas versiones de Firefox y Chrome, y en IExplore 10.

Para obtener una lista completa de los tipos de mimo, vea Wikipedia .

Para obtener una lista completa de números mágicos, vea Wikipedia .

Answer 8

Usando MVC podemos restringir la carga solo a archivos zip

.HtmlAttributes(new { accept = ".zip*" })