Respuestas:
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.
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>MiBsi calcula a la base de 1024.
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">sizepropiedad
$(obj).files[0].size/1024/1024; Pero lo cambió aobj.files[0].size/1024/1024;
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.
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;
}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.'
);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">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
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");
}
}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>Puedes probar este cargador fino
Funciona bien en IE6 (y superior), Chrome o Firefox
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.