Gibt es eine Möglichkeit zu überprüfen Dateigröße bevor ich sie mit JavaScript hochlade?
Antworten
Zu viele Anzeigen?
Pekka
Punkte
429407
No Ja, unter Verwendung der Datei-API in neueren Browsern. Siehe TJs Antwort für Details.
Wenn Sie auch ältere Browser unterstützen müssen, müssen Sie einen Flash-basierten Uploader verwenden wie SWFUpload o Uploadify um dies zu tun.
En SWFUpload Funktionen Demo zeigt, wie die file_size_limit Einstellung funktioniert.
Beachten Sie, dass hierfür (natürlich) Flash benötigt wird und dass die Funktionsweise etwas anders ist als bei normalen Upload-Formularen.
kibus90
Punkte
315
Ich habe etwas Ähnliches gemacht:
$('#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 2MiB. You file size is: ' + numb + ' MiB');
} else {
alert('it okey, your file has ' + numb + 'MiB')
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="file" id="image-file">
Lemon Kazi
Punkte
3246
Auch wenn die Frage bereits beantwortet ist, wollte ich meine Antwort veröffentlichen. Sie können sie wie im folgenden Code verwenden.
document.getElementById("fileinput").addEventListener("change",function(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 + " bytes\n" +
"starts with: " + contents.substr(1, contents.indexOf("\n"))
);
if (f.size > 5242880) {
alert('File size Greater then 5MiB!');
}
}
r.readAsText(f);
} else {
alert("Failed to load file");
}
})
<input type="file" id="fileinput" />
Nicht registrierter Benutzer
Punkte
0
Ich verwende eine wichtige Javascript-Funktion, die ich auf der Mozilla Developer Network-Seite gefunden habe https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications zusammen mit einer anderen Funktion mit AJAX und nach meinen Bedürfnissen geändert. Sie empfängt eine Dokumentenelement-ID, die die Stelle in meinem HTML-Code angibt, an der ich die Dateigröße angeben möchte.
<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>Prost
nodws
Punkte
884
JQuery Beispiel in diesem Thread zur Verfügung gestellt wurde extrem veraltet, und Google war nicht hilfreich überhaupt so hier ist meine Revision:
<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>
