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

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?

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

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" }
});

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;

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;
        }
    })
});

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('');
     }
    });

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.

<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.

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;
}