Wie überprüfe ich die Größe der Dateieingabe mit jQuery?

135

Ich habe ein Formular mit Funktionen zum Hochladen von Dateien und möchte eine nette clientseitige Fehlerberichterstattung erhalten, wenn die Datei, die der Benutzer hochladen möchte, zu groß ist. Gibt es eine Möglichkeit, die Dateigröße mit jQuery zu überprüfen, entweder nur auf dem Client oder irgendwie die Datei zurück auf den Server zu überprüfen?

Jimmy
quelle

Antworten:

275

Sie haben tatsächlich keinen Zugriff auf das Dateisystem (z. B. Lesen und Schreiben lokaler Dateien). Aufgrund der HTML5-Datei-API-Spezifikation gibt es jedoch einige Dateieigenschaften, auf die Sie Zugriff haben, und die Dateigröße ist eine davon.

Für den HTML unten

<input type="file" id="myFile" />

Versuche Folgendes:

//binds to onchange event of your input field
$('#myFile').bind('change', function() {

  //this.files[0].size gets the size of your file.
  alert(this.files[0].size);

});

Da es Teil der HTML5-Spezifikation ist, funktioniert es nur für moderne Browser (v10 für IE erforderlich). Ich habe hier weitere Details und Links zu anderen Dateiinformationen hinzugefügt , die Sie kennen sollten: http://felipe.sabino.me/javascript / 2012/01/30 / javascipt-checking-the-file-size /


Unterstützung für alte Browser

Beachten Sie, dass alte Browser einen nullWert für den vorherigen this.filesAufruf zurückgeben. Wenn this.files[0]Sie also auf den Zugriff zugreifen, wird eine Ausnahme ausgelöst , und Sie sollten vor der Verwendung prüfen, ob die Datei-API unterstützt wird

Felipe Sabino
quelle
6
Jeder sagt, dass dies nicht möglich ist - und doch ist es hier. Das funktioniert. Ich habe es getestet.
Peter
35
@Jeroen Ich stimme zu, dass es nicht die ideale Lösung für viele Leute ist, nicht für den Internet Explorer zu arbeiten, aber nicht abzustimmen und zu sagen, dass die Antwort ein bisschen zu nutzlos ist? Ich habe diese Lösung in einer Vielzahl von Unternehmens-Weblösungen verwendet, die nur in Chrome und / oder Firefox funktionieren mussten, und einige Leute, die nach dieser Lösung suchen, befinden sich möglicherweise an derselben Stelle, sodass diese Lösung gut genug ist .
Felipe Sabino
3
Ich bin gerade auf diese Antwort bei Google gestoßen und werde sie verwenden, um zu verhindern, dass Benutzer Dateien veröffentlichen, die eine bestimmte Größe überschreiten. Da ich auch die Dateigröße auf der Serverseite überprüfe, bin ich froh, eine clientseitige Lösung zu haben, die in IE8 nicht funktioniert.
Steve Wilkes
2
@GaolaiPeng Dieser Fehler ist wahrscheinlich darauf zurückzuführen, dass die jQueryJavascript-Datei nicht hinzugefügt wurde (oder nicht richtig geladen wurde). Haben Sie es auf headIhrer Seite hinzugefügt ?
Felipe Sabino
1
@volumeone Aus diesem Grund habe ich in meiner Antwort gesagt, dass Sie "vor der Verwendung auf Datei-API-Unterstützung prüfen" sollten, und dann können Sie die Benutzeroberfläche entsprechend ändern.
Felipe Sabino
41

Wenn Sie jQuery's verwenden möchten, validatekönnen Sie diese Methode erstellen:

$.validator.addMethod('filesize', function(value, element, param) {
    // param = size (en bytes) 
    // element = element to validate (<input>)
    // value = value of the element (file name)
    return this.optional(element) || (element.files[0].size <= param) 
});

Sie würden es verwenden:

$('#formid').validate({
    rules: { inputimage: { required: true, accept: "png|jpe?g|gif", filesize: 1048576  }},
    messages: { inputimage: "File must be JPG, GIF or PNG, less than 1MB" }
});
Naoise Golden
quelle
1
@Dan ja, die Dateigrößeneigenschaft ist Teil der HTML5-Spezifikation, daher funktioniert sie nur für moderne Browser (für IE wäre es Version 10+)
Felipe Sabino
7
Sie haben die acceptRegel falsch verwendet , wo Sie die extensionRegel hätten verwenden sollen . ~ Die acceptRegel gilt nur für MIME-Typen. Die extensionRegel gilt für Dateierweiterungen. Sie müssen auch die additional-methods.jsDatei für diese Regeln einschließen .
Sparky
Ergänzung zu @ $('#formid').validate({ rules: { inputimage: { required: true, extension: "png|jpe?g|gif", filesize: 1048576 }}, messages: { inputimage: "File must be JPG, GIF or PNG, less than 1MB" } });
Sparkys
26

Dieser Code:

$("#yourFileInput")[0].files[0].size;

Gibt die Dateigröße für eine Formulareingabe zurück.

Ab FF 3.6 sollte dieser Code lauten:

$("#yourFileInput")[0].files[0].fileSize;
jeferod83
quelle
2
Ihr Faustcode funktioniert in Chrome, aber der zweite funktioniert nicht für FireFox.
Débora
Diesen zweiten Code musste ich für alle modernen Browser (ab 2014) verwenden.
Dreamcasting
1
Der erste Code funktioniert mit IE 10, 11, Edge, Chrome, Safari (Windows-Version), Brave und Firefox.
Mashukur Rahman
12

Ich veröffentliche auch meine Lösung, die für ein ASP.NET- FileUploadSteuerelement verwendet wird. Vielleicht findet es jemand nützlich.

    $(function () {        
    $('<%= fileUploadCV.ClientID %>').change(function () {

        //because this is single file upload I use only first index
        var f = this.files[0]

        //here I CHECK if the FILE SIZE is bigger than 8 MB (numbers below are in bytes)
        if (f.size > 8388608 || f.fileSize > 8388608)
        {
           //show an alert to the user
           alert("Allowed file size exceeded. (Max. 8 MB)")

           //reset file upload control
           this.value = null;
        }
    })
});
Besnik Kastrati
quelle
1
Sie müssen den Wert von null überprüfen, da f = this.files[0]dies sonst in älteren Browsern fehlschlägt. zBif (f && (f.size > 8388608 || f.fileSize > 8388608))
Gone Coding
9

Verwenden Sie unten, um die Dateigröße zu überprüfen und zu löschen, ob sie größer ist.

    $("input[type='file']").on("change", function () {
     if(this.files[0].size > 2000000) {
       alert("Please upload file less than 2MB. Thanks!!");
       $(this).val('');
     }
    });
Umesh Patil
quelle
1
Sollte $ (this) .val (null) verwenden; Andernfalls scheint das Formular nicht mehr korrekt zu senden, ohne einen geeigneten Anhang auszuwählen.
Kevin Grabher
1

Sie können diese Art der Überprüfung mit Flash oder Silverlight durchführen, jedoch nicht mit Javascript. Die Javascript-Sandbox ermöglicht keinen Zugriff auf das Dateisystem. Die Größenprüfung müsste nach dem Hochladen serverseitig durchgeführt werden.

Wenn Sie die Silverlight / Flash-Route verwenden möchten, können Sie überprüfen, ob standardmäßig ein regulärer Handler zum Hochladen von Dateien verwendet wird, der die normalen Steuerelemente verwendet. Auf diese Weise wird die Erfahrung, wenn Silverlight / Flash installiert ist, etwas umfangreicher.

Kelsey
quelle
1
<form id="uploadForm" class="disp-inline" role="form" action="" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="file">
</form>
<button onclick="checkSize();"></button>
<script>
    function checkSize(){
        var size = $('#uploadForm')["0"].firstChild.files["0"].size;
        console.log(size);
    }
</script>

Ich fand das am einfachsten, wenn Sie nicht vorhaben, das Formular über Standard-Ajax / HTML5-Methoden einzureichen, aber es funktioniert natürlich mit allem.

ANMERKUNGEN:

var size = $('#uploadForm')["0"]["0"].files["0"].size;

Das hat früher funktioniert, aber es funktioniert nicht mehr in Chrome. Ich habe gerade den obigen Code getestet und es hat sowohl in ff als auch in Chrome (lastest) funktioniert. Die zweite ["0"] ist jetzt firstChild.

Dillon Burnett
quelle
0

Bitte versuchen Sie dies:

var sizeInKB = input.files[0].size/1024; //Normally files are in bytes but for KB divide by 1024 and so on
var sizeLimit= 30;

if (sizeInKB >= sizeLimit) {
    alert("Max file size 30KB");
    return false;
}
Bablu Ahmed
quelle