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

validar tamaño imagen laravel

Question

¿Hay alguna forma de verificar el tamaño del archivo antes de subirlo usando JavaScript?

Answer 1

A pesar de que la pregunta es respondida, quería publicar mi respuesta. Podría 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");
    }
  }

Answer 2

El ejemplo de JQuery proporcionado en este hilo fue extremadamente obsoleto, y Google no fue útil en absoluto, 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>

Answer 3

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

Answer 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'');
} 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">

Answer 5

Puedes probar este fineuploader

Funciona bien bajo IE6 (y avove), Chrome o Firefox

Answer 6

Si está utilizando la validación de jQuery, 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.''
);

Answer 7

Si establece 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.

Establezca el ''Modo de documento'' en ''Estándares'':

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

A continuación, utilice el método javascript de ''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.

Answer 8

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

Answer 9

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 cambiada según mis necesidades. Recibe una identificación del elemento del documento con respecto al lugar en mi código html donde deseo 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>

Aclamaciones

Answer 10

No Sí, usando la API de archivos en navegadores más nuevos. Vea la respuesta de TJ para más detalles.

Si también debe admitir navegadores más antiguos, 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 configuración file_size_limit .

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

Answer 11

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 retroceder (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 here está en acción. Inténtalo con una versión reciente de Chrome o Firefox.

Un poco 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 permitir 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 tenga más de 5 MB de tamaño y darles un mensaje amigable si es (para que no pasen todo ese tiempo cargando solo para obtener el resultado tirado en el servidor), pero también debe imponer ese límite en el servidor, ya que todos los límites del lado del cliente (y otras validaciones) se pueden eludir.

Answer 12

Trabajos para elemento de archivo dinámico y estático

Solución Solo 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">