180
È possibile controllare la dimensione del file prima di caricarla utilizzando JavaScript?Convalida dimensione caricamento file JavaScript
A
risposta
247
Sì, c'è una nuova funzione del W3C supportata da alcuni browser moderni, lo File API. Può essere usato per questo scopo ed è facile verificare se è supportato e ripiegare (se necessario) su un altro meccanismo, se non lo è.
Ecco un esempio 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>
E here è in azione. Prova con una versione recente di Chrome o Firefox.
Leggermente off-topic, ma: Si noti che la validazione lato client è alcun sostituto per la convalida sul lato server. La convalida lato client serve esclusivamente a fornire un'esperienza utente migliore. Ad esempio, se non autorizzi il caricamento di un file superiore a 5 MB, puoi utilizzare la convalida sul lato client per verificare che il file scelto dall'utente non abbia una dimensione superiore a 5 MB e dare loro un messaggio amichevole se è (quindi non passano tutto il tempo caricando solo per ottenere il risultato buttato via sul server), ma è necessario anche applicare tale limite sul server, poiché tutti i limiti lato client (e altre convalide) possono essere elusi .
11
No
Sì, utilizzando l'API File nei nuovi browser. Vedi la risposta di TJ per i dettagli.
Se è necessario supportare anche i browser più vecchi, è necessario utilizzare un uploader basato su Flash come SWFUpload o Uploadify per eseguire questa operazione.
Il SWFUpload Features Demo mostra come funziona l'impostazione file_size_limit.
Nota che questo (ovviamente) ha bisogno di Flash, più il modo in cui funziona è leggermente diverso dai normali moduli di caricamento.
0
Si può provare questo fineuploader
Funziona bene in IE6 (e avove), Chrome o Firefox
+3
Fine Uploader non è in grado di convalidare la dimensione del file in IE9 e versioni precedenti in quanto non supporta l'API file non è supportata. IE10 è la prima versione di Internet Explorer che supporta l'API File. –
87
utilizzando 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>
6
Se stai usando jQuery convalida, si potrebbe scrivere qualcosa del tipo:
$.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.'
);
2
Io uso una funzione Javascript principale che avevo trovato sul sito Mozilla Developer Network https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications, insieme ad un'altra funzione con AJAX e modificata in base alle mie esigenze. Riceve un ID elemento del documento riguardante la posizione nel mio codice html in cui voglio scrivere la dimensione del file.
<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>
Acclamazioni
-2
Se si imposta l'Ie 'modalità documento' a 'standard' è possibile utilizzare il metodo semplice javascript 'size' per ottenere la dimensione del file caricato.
Impostare il Ie 'modalità documento' a 'standard':
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
di, usa la 'dimensione' javascript metodo per ottenere la dimensione del file caricato:
<script type="text/javascript">
var uploadedFile = document.getElementById('imageUpload');
var fileSize = uploadedFile.files[0].size;
alert(fileSize);
</script>
Funziona per me .
+1
Questo non funzionerà in IE9 o versioni precedenti, indipendentemente dal metatag che aggiungi. –
4
È piuttosto semplice.
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;
}
2
Anche se la domanda è stata risolta, ho voluto postare la mia risposta. Potrebbe tornare utile ai futuri spettatori. Puoi usarlo come nel seguente codice.
<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");
}
}
9
Lavori per la Dinamica e Statica Elemento File (Il metodo FileSize è una caratteristica non standard e deprecata dal Gecko 7.0.)
Javascript unica soluzione
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">+1
Il metodo FileSize è una funzione non standard e obsoleto da Gecko 7.0. https://developer.mozilla.org/en-US/docs/Web/API/File/fileSize – MissRaphie
+1
Bella risposta. Stavo avendo lo stesso problema ma la soluzione ha funzionato per me :) –
0
JQuery ex ampia fornite in questa discussione è stata estremamente obsoleto, e Google non era affatto disponibile: ecco la mia revisione:
<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>
Problemi correlati
- 1. Convalida caricamento file Laravel
- 2. PHP Convalida il caricamento file
- 3. Limite dimensione caricamento file Rails
- 4. convalida la dimensione del file prima del caricamento per tipo di input = file utilizzando angularjs
- 5. Javascript per controllare la dimensione del file prima del caricamento in Internet Explorer
- 6. Caricamento file JavaScript Web Work
- 7. Caricamento file asincrono (caricamento file AJAX) utilizzando jsp e javascript
- 8. Javascript: caricamento di un file ... senza file
- 9. Convalida la dimensione dell'immagine nell'amministratore di django
- 10. Come caricare la dimensione del file prima del caricamento
- 11. dimensione del file massima consentita dal file ASP.NET Controllo caricamento
- 12. Convalida MIME per caricamento file php non funzionante
- 13. Convalida per file di grandi dimensioni al caricamento
- 14. Convalida estensione file in AngularJs prima del caricamento
- 15. Convalida javascript numeri decimali
- 16. Asp.Net Controllare la dimensione del file prima del caricamento
- 17. Come verificare la dimensione del file durante il caricamento
- 18. Limite caricamento dimensione file in Orchard CMS Media
- 19. Symfony 2 caricamento xml convalida del bundle
- 20. Come convalidare il tipo di file di un caricamento file?
- 21. Come limitare la dimensione del file di tipo di caricamento file in PHP?
- 22. Convalida dell'estensione del file prima di caricare il file
- 23. caricamento/esecuzione asincroni javascript
- 24. Lazy caricamento JavaScript e JavaScript incorporato
- 25. Cambia dimensione immagine con JavaScript
- 26. problema di caricamento file
- 27. Limite caricamento file in HTTP
- 28. Caricamento file Blueimp: caricamento file singolo
- 29. Binding di convalida al primo caricamento
- 30. espressioni regolari Javascript per la convalida dei nomi file
+1 per i "tutti i limiti lato client (e altre convalide) può essere aggirato". Questo è altrettanto vero per le applicazioni di frontend del database "native"/"compilate". E non mettere le password di accesso al database nel codice compilato, nemmeno "crittografato" (con una password che si trova anche nel codice - l'ho visto di recente). – masterxilo