it-swarm.com.de

Wie prüfe ich die Dateigröße mit jQuery?

Ich habe ein Formular mit Datei-Upload-Funktionen, und ich würde gerne einige Nice-Client-Fehlerberichte erstellen können, wenn die Datei, die der Benutzer hochzuladen versucht, zu groß ist. Gibt es eine Möglichkeit, die Dateigröße mit jQuery zu überprüfen, entweder rein auf dem Client oder irgendwie die Datei zurück an den Server senden, um zu überprüfen?

123
Jimmy

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

Für das 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 ist für den 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/


Alte Browser unterstützen

Beachten Sie, dass alte Browser einen null-Wert für den vorherigen this.files-Aufruf zurückgeben. Wenn Sie also auf this.files[0] zugreifen, wird eine Ausnahme ausgelöst, und Sie sollten für Unterstützung der Datei-API prüfen überprüfen, bevor Sie ihn verwenden

258
Felipe Sabino

Wenn Sie die validate von jQuery verwenden möchten, kö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" }
});
37
Naoise Golden

Dieser Code:

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

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

Bei FF 3.6 und höher sollte dieser Code lauten:

$("#yourFileInput")[0].files[0].fileSize;
20
jeferod83

Ich poste auch meine Lösung, die für ein ASP.NET FileUpload-Steuerelement verwendet wird. Vielleicht findet jemand es 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;
        }
    })
});
12
Besnik Kastrati

Verwenden Sie unten, um die Dateigröße zu überprüfen und zu löschen, wenn 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('');
     }
    });
2
Umesh Patil

Sie können diese Art der Überprüfung mit Flash oder Silverlight durchführen, jedoch nicht mit Javascript. Die Javascript-Sandbox erlaubt keinen Zugriff auf das Dateisystem. Die Größenprüfung muss serverseitig durchgeführt werden, nachdem sie hochgeladen wurde.

Wenn Sie die Silverlight/Flash-Route verwenden möchten, können Sie überprüfen, ob ein Standard-Datei-Upload-Handler installiert ist, der die normalen Steuerelemente verwendet. Wenn also Silverlight/Flash installiert ist, wird die Erfahrung ein wenig reicher.

1
Kelsey
<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 habe festgestellt, dass dies am einfachsten ist, wenn Sie das Formular nicht mit den Standardmethoden ajax/html5 absenden möchten, aber es funktioniert natürlich mit allem.

ANMERKUNGEN: 

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

Früher hat das funktioniert, aber es ist nicht mehr in Chrome, ich habe den Code oben getestet und funktionierte sowohl in ff als auch in chrome (lastest). Die zweite ["0"] ist jetzt firstChild.

0
Dillon Burnett

Bitte versuchen Sie das:

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;
}
0
Bablu Ahmed