archivo JavaScript carga

247

Sí, hay una nueva característica del W3C que es compatible con algunos navegadores modernos, el File API. Se puede usar para este propósito, y es fácil probar si es compatible y retroceder (si es necesario) a otro mecanismo si no es así.

Aquí está 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 que está en acción. Pruébalo con una versión reciente de Chrome o Firefox.

poco fuera de tema, pero: Tenga en cuenta que la validación del lado del cliente es hay sustituto para 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 (por lo que no gastan todo ese tiempo la posibilidad de subir sólo para obtener el resultado tirado en el servidor), pero hay que también cumplir ese límite en el servidor, ya que todos los límites del lado del cliente (y otras validaciones) pueden ser eludidas .

Fuente

2010-09-15 13:05:56

+0

+1 para los "todos los límites del lado del cliente (y otras validaciones) se puede evitar". Esto es tan cierto para las aplicaciones frontend de base de datos "nativas"/"compiladas". Y no coloque 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, simplemente lo vi recientemente). – masterxilo

11

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

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

El SWFUpload Features Demo muestra cómo funciona la configuración file_size_limit.

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

Fuente

2010-09-15 13:03:42

0

Puede probar este fineuploader

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

Fuente

2012-09-20 08:47:44 anson

+3

Fine Uploader no puede validar el tamaño de archivo en IE9 y versiones anteriores, ya que no es compatible con File API no es compatible. IE10 es la primera versión de Internet Explorer que admite File API. –

87

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>

Fuente

2012-11-06 11:21:04 Ben

+1

@ipd, ¿hay alguna posibilidad de una falla de IE8? (Me estoy odiando incluso por mencionar IE) – Asher

+0

@ben ver arriba. – ipd

+0

Éste funciona pero ¿funciona también para varios archivos? –

6

Si estás usando jQuery Validación, usted podría escriba 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.' 
);

Fuente

2013-04-29 09:10:46

2

Utilizo una función principal de Javascript que encontré en el sitio Mozilla Developer Network https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications, junto con otra función con AJAX y que cambié según mis necesidades. Recibe una identificación de elemento de 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>

Saludos

Fuente

2013-07-26 18:22:28

-2

Si se establece el IE Modo Documento "a 'normas' se puede utilizar el método simple javascript 'tamaño' para obtener el tamaño del archivo subido.

Ajuste el Ie 'Modo de documento' a 'Estándares':

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

Than, utilice el 'tamaño' javascript método para conseguir tamaño del archivo subido:

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

Funciona para mí .

Fuente

2013-07-31 13:54:41 Lilla

+1

Esto no funcionará en IE9 o anterior, sin importar las metaetiquetas que agregue. –

4

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

Fuente

2016-04-22 14:37:57

2

Aunque la pregunta es respondida, quería publicar mi respuesta. Puede ser útil para los 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"); 
    } 
    }

Fuente

2016-06-01 06:47:56

9

Obras para Dinámico y elemento de archivo estático (El método FileSize es una característica no estándar y en desuso desde Gecko 7.0.)

Javascript única solución

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

Fuente

2017-06-12 17:24:16

+1

El método FileSize es una característica no estándar y obsoleto desde Gecko 7.0. https://developer.mozilla.org/en-US/docs/Web/API/File/fileSize – MissRaphie

+1

Nice Answer. Estaba teniendo el mismo problema pero tu solución funcionó para mí :) –

0

JQuery ex amplia proporcionada en este hilo era muy anticuado, y Google no era servicial en todo lo que aquí es 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>

Fuente

2017-08-10 17:48:38 nodws

Respuesta

Cuestiones relacionadas