Antworten:
Ja , es gibt eine neue Funktion aus dem W3C, die von einigen modernen Browsern unterstützt wird, die Datei-API . Es kann für diesen Zweck verwendet werden, und es ist einfach zu testen, ob es unterstützt wird, und (falls erforderlich) auf einen anderen Mechanismus zurückzugreifen, wenn dies nicht der Fall ist.
Hier ist ein vollständiges Beispiel:
<!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>
Und hier ist es in Aktion. Versuchen Sie dies mit einer aktuellen Version von Chrome oder Firefox.
Etwas abseits des Themas, aber: Beachten Sie, dass die clientseitige Validierung kein Ersatz für die serverseitige Validierung ist. Die clientseitige Validierung dient lediglich dazu, eine bessere Benutzererfahrung zu ermöglichen. Wenn Sie beispielsweise das Hochladen einer Datei mit mehr als 5 MB nicht zulassen, können Sie mithilfe der clientseitigen Überprüfung überprüfen, ob die vom Benutzer ausgewählte Datei nicht größer als 5 MB ist, und ihnen gegebenenfalls eine nette, freundliche Nachricht senden (so dass sie nicht verbringen die ganze Zeit das Hochladen nur das Ergebnis erhalten auf dem Server weggeworfen), aber Sie müssen auch diese Grenze auf dem Server durchzusetzen, da alle clientseitigen Grenzen (und andere Validierungen) umgangen werden kann.
Verwenden von 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>
MiBwenn Sie zur Basis von berechnen 1024.
Funktioniert für dynamische und statische Dateielemente
Nur Javascript- Lösung
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">sizeEigenschaft
$(obj).files[0].size/1024/1024; Aber änderte es zuobj.files[0].size/1024/1024;
Nein Ja, Verwenden der Datei-API in neueren Browsern. Einzelheiten finden Sie in der Antwort von TJ.
Wenn Sie auch ältere Browser unterstützen müssen, müssen Sie dazu einen Flash-basierten Uploader wie SWFUpload oder Uploadify verwenden.
Die SWFUpload Features Demo zeigt, wie die file_size_limitEinstellung funktioniert.
Beachten Sie, dass dies (offensichtlich) Flash benötigt und sich die Funktionsweise ein wenig von normalen Upload-Formularen unterscheidet.
Es ist ziemlich einfach.
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;
}
Wenn Sie jQuery Validation verwenden, können Sie Folgendes schreiben:
$.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.'
);
Ich habe so etwas 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 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">Ich verwende eine Haupt-Javascript-Funktion, die ich auf der Mozilla Developer Network-Website https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications gefunden habe , zusammen mit einer anderen Funktion mit AJAX, die ich gemäß meinen Anforderungen geändert habe. Es erhält eine Dokumentelement-ID bezüglich der Stelle in meinem HTML-Code, an der ich die Dateigröße schreiben 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
Obwohl die Frage beantwortet ist, wollte ich meine Antwort posten. Könnte für zukünftige Zuschauer nützlich sein. Sie können es wie im folgenden Code verwenden.
<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");
}
}Das in diesem Thread bereitgestellte JQuery-Beispiel war extrem veraltet, und Google war überhaupt nicht hilfreich. Hier ist meine Überarbeitung:
<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>Sie können diesen Fineuploader ausprobieren
Es funktioniert gut unter IE6 (und höher), Chrome oder Firefox
Wenn Sie den Ie-Dokumentmodus auf "Standards" setzen, können Sie die einfache Javascript-Methode "Größe" verwenden, um die Größe der hochgeladenen Datei zu ermitteln.
Stellen Sie den Ie 'Document Mode' auf 'Standards' ein:
<meta http-equiv="X-UA-Compatible" content="IE=Edge">Verwenden Sie dann die Javascript-Methode 'size', um die Größe der hochgeladenen Datei zu ermitteln:
<script type="text/javascript">
var uploadedFile = document.getElementById('imageUpload');
var fileSize = uploadedFile.files[0].size;
alert(fileSize);
</script>Für mich geht das.