Validación de tamaño de carga de archivos JavaScript

Respuestas:

327

Sí , hay una nueva característica del W3C que es compatible con algunos navegadores modernos, la API de archivos . Puede usarse para este propósito, y es fácil probar si es compatible y recurrir (si es necesario) a otro mecanismo si no lo es.

Aquí hay un ejemplo completo:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Show File Data</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
</style>
<script type='text/javascript'>
function showFileSize() {
    var input, file;

    // (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) {
        bodyAppend("p", "The file API isn't supported on this browser yet.");
        return;
    }

    input = document.getElementById('fileinput');
    if (!input) {
        bodyAppend("p", "Um, couldn't find the fileinput element.");
    }
    else if (!input.files) {
        bodyAppend("p", "This browser doesn't seem to support the `files` property of file inputs.");
    }
    else if (!input.files[0]) {
        bodyAppend("p", "Please select a file before clicking 'Load'");
    }
    else {
        file = input.files[0];
        bodyAppend("p", "File " + file.name + " is " + file.size + " bytes in size");
    }
}

function bodyAppend(tagName, innerHTML) {
    var elm;

    elm = document.createElement(tagName);
    elm.innerHTML = innerHTML;
    document.body.appendChild(elm);
}
</script>
</head>
<body>
<form action='#' onsubmit="return false;">
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load' onclick='showFileSize();'>
</form>
</body>
</html>

Y aquí está en acción. Pruebe eso con una versión reciente de Chrome o Firefox.

Ligeramente fuera de tema, pero: tenga en cuenta que la validación del lado del cliente no sustituye a la validación del lado del servidor. La validación del lado del cliente es puramente para hacer posible proporcionar una mejor experiencia de usuario. Por ejemplo, si no permite cargar un archivo de más de 5 MB, puede usar la validación del lado del cliente para verificar que el archivo que el usuario ha elegido no tiene más de 5 MB y darles un mensaje agradable si es (para que no se pasan todo el tiempo que la carga sólo para obtener el resultado tirado en el servidor), pero debe también cumplir ese límite en el servidor, ya que todos los límites del lado del cliente (y otros) validaciones pueden ser evitados.

TJ Crowder
fuente
12
+1 para "todos los límites del lado del cliente (y otras validaciones) pueden eludirse". Esto es tan cierto para las aplicaciones frontend de base de datos "nativas" / "compiladas". Y no ponga las contraseñas de acceso a la base de datos en su código compilado, ni siquiera "encriptado" (con una contraseña que también está en el código; acabo de ver esto recientemente).
masterxilo
118

Usando jquery:

<form action="upload" enctype="multipart/form-data" method="post">

    Upload image:
    <input id="image-file" type="file" name="file" />
    <input type="submit" value="Upload" />

    <script type="text/javascript">
        $('#image-file').bind('change', function() {
            alert('This file size is: ' + this.files[0].size/1024/1024 + "MB");
        });
    </script>

</form>
Ben
fuente
2
@ipd, ¿hay alguna posibilidad de un retroceso de IE8? (Me odio incluso por mencionar IE)
Asher
2
Este funciona bien, pero ¿funciona también para varios archivos?
Ingus
44
Debería ser MiBsi calcula a la base de 1024.
slartidan
69

Funciona para elementos de archivo dinámico y estático

Solución solo de Javascript

function ValidateSize(file) {
        var FileSize = file.files[0].size / 1024 / 1024; // in MB
        if (FileSize > 2) {
            alert('File size exceeds 2 MB');
           // $(file).val(''); //for clearing with Jquery
        } else {

        }
    }
 <input onchange="ValidateSize(this)" type="file">
Expandir fragmento

Arun Prasad ES
fuente
1
Buena respuesta. Estaba teniendo el mismo problema, pero su solución funcionó para mí :)
Dipankar Das
1
NB OP editó la publicación para que el código ahora sea correcto, utilizando la sizepropiedad
UsAndRufus
1
Gracias por la respuesta, estaba casi haciendo lo mismo pero con un cambio. $(obj).files[0].size/1024/1024; Pero lo cambió aobj.files[0].size/1024/1024;
shakir Baba
¿Hay alguna manera de extender esto para la validación de ancho y alto? (dejando un "archivo" como punto de partida y suponiendo que se refiere a una imagen)
jlmontesdeoca
@jlmontesdeoca Creo que podría leer el archivo con la ayuda del lienzo y obtener su altura y anchura aquí mismo.
Arun Prasad ES
14

No Sí, utilizando la API de archivos en los navegadores más nuevos. Ver la respuesta de TJ para más detalles.

Si necesita admitir navegadores antiguos también, tendrá que usar un cargador basado en Flash como SWFUpload o Uploadify para hacer esto.

La demostración de características de SWFUpload muestra cómo funciona la file_size_limitconfiguración.

Tenga en cuenta que esto (obviamente) necesita Flash, además la forma en que funciona es un poco diferente de los formularios de carga normales.

Pekka
fuente
14

Es muy simple

            var oFile = document.getElementById("fileUpload").files[0]; // <input type="file" id="fileUpload" accept=".jpg,.png,.gif,.jpeg"/>

            if (oFile.size > 2097152) // 2 mb for bytes.
            {
                alert("File size must under 2mb!");
                return;
            }
Hasan Tuna Oruç
fuente
La mejor respuesta. dulce y simple ... :)
A. Sinha
12

Si está utilizando jQuery Validation, podría escribir algo como esto:

$.validator.addMethod(
    "maxfilesize",
    function (value, element) {
        if (this.optional(element) || ! element.files || ! element.files[0]) {
            return true;
        } else {
            return element.files[0].size <= 1024 * 1024 * 2;
        }
    },
    'The file size can not exceed 2MB.'
);
Nikolaos Georgiou
fuente
4

Hice algo así:

$('#image-file').on('change', function() {
 var numb = $(this)[0].files[0].size/1024/1024;
numb = numb.toFixed(2);
if(numb > 2){
alert('to big, maximum is 2MB. You file size is: ' + numb +' MB');
} else {
alert('it okey, your file has ' + numb + 'MB')
}
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="file" id="image-file">
Expandir fragmento

kibus90
fuente
Esto dice javascript, JQuery no está en las etiquetas
Hola234
3

Utilizo una función principal de Javascript que encontré en el sitio de la red de desarrolladores de Mozilla https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications , junto con otra función con AJAX y la cambié según mis necesidades. Recibe una identificación del elemento del documento con respecto al lugar en mi código html donde quiero escribir el tamaño del archivo.

<Javascript>

function updateSize(elementId) {
    var nBytes = 0,
    oFiles = document.getElementById(elementId).files,
    nFiles = oFiles.length;

    for (var nFileId = 0; nFileId < nFiles; nFileId++) {
        nBytes += oFiles[nFileId].size;
    }
    var sOutput = nBytes + " bytes";
    // optional code for multiples approximation
    for (var aMultiples = ["K", "M", "G", "T", "P", "E", "Z", "Y"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
        sOutput = " (" + nApprox.toFixed(3) + aMultiples[nMultiple] + ")";
    }

    return sOutput;
}
</Javascript>

<HTML>
<input type="file" id="inputFileUpload" onchange="uploadFuncWithAJAX(this.value);" size="25">
</HTML>

<Javascript with XMLHttpRequest>
document.getElementById('spanFileSizeText').innerHTML=updateSize("inputFileUpload");
</XMLHttpRequest>

Salud

Jose Gaspar
fuente
3

A pesar de que la pregunta fue respondida, quería publicar mi respuesta. Puede ser útil para futuros espectadores. Puede usarlo como en el siguiente código.

<input type="file" id="fileinput" />
<script type="text/javascript">
  function readSingleFile(evt) {
    //Retrieve the first (and only!) File from the FileList object
    var f = evt.target.files[0]; 
    if (f) {
      var r = new FileReader();
      r.onload = function(e) { 
          var contents = e.target.result;
        alert( "Got the file.n" 
              +"name: " + f.name + "n"
              +"type: " + f.type + "n"
              +"size: " + f.size + " bytesn"
              + "starts with: " + contents.substr(1, contents.indexOf("n"))
        ); 
        if(f.size > 5242880) {
               alert('File size Greater then 5MB!');
                }


      }
      r.readAsText(f);
    } else { 
      alert("Failed to load file");
    }
  }
Lemon Kazi
fuente
3

El ejemplo de JQuery proporcionado en este hilo estaba extremadamente desactualizado, y Google no fue de ninguna ayuda, así que aquí está mi revisión:

 <script type="text/javascript">
        $('#image-file').on('change', function() {
            console.log($(this)[0].files[0].name+' file size is: ' + $(this)[0].files[0].size/1024/1024 + 'Mb');
        });
    </script>
asentir
fuente
1

Puedes probar este cargador fino

Funciona bien en IE6 (y superior), Chrome o Firefox

anson
fuente
3
Fine Uploader no puede validar el tamaño del archivo en IE9 y versiones anteriores ya que no admite la API de archivos. IE10 es la primera versión de Internet Explorer que admite la API de archivos.
Ray Nicholus
-2

Si configura el 'Modo de documento' en 'Estándares', puede usar el método simple 'tamaño' de javascript para obtener el tamaño del archivo cargado.

Configure el 'Modo de documento' a 'Estándares':

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

Luego, use el método de JavaScript 'tamaño' para obtener el tamaño del archivo cargado:

<script type="text/javascript">
    var uploadedFile = document.getElementById('imageUpload');
    var fileSize = uploadedFile.files[0].size;
    alert(fileSize); 
</script>

Esto funciona para mi.

Lilla
fuente
1
Esto no funcionará en IE9 o versiones anteriores, sin importar las metaetiquetas que agregue.
Ray Nicholus