Wie Datei Eingabegröße mit jQuery überprüfen?

Question

Ich habe ein Formular mit Datei-Upload-Funktionen, und ich möchte ein paar nette Client-Seite Fehler in der Lage sein Berichterstattung zu haben, wenn die Datei der Benutzer zu laden versucht, zu groß ist, ist es eine Möglichkeit, gegen die Dateigröße zu überprüfen, mit jQuery entweder rein auf dem Client oder irgendwie die Datei wieder auf den Server veröffentlichen zu überprüfen?

Answer 1

Sie haben tatsächlich keinen Zugriff (zum Beispiel das Lesen und lokale Dateien zu schreiben), um Dateisystem, jedoch aufgrund von HTML5-Datei-API-Spezifikation gibt es einige Dateieigenschaften, die Sie Zugang zu tun haben, und die Dateigröße ist eine der sie.

Für den folgenden HTML-Code

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

versuchen Sie 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 ein Teil der HTML5-Spezifikation ist, wird es nur für die modernen Browser (v10 für IE erforderlich) und ich hinzugefügt hier mehr Details und Links zu anderen Dateiinformationen sollen Sie wissen: http://felipe.sabino.me/javascript/2012/01/30/javascipt-checking-the- Datei-Größe /

---

Alt-Browser unterstützen

Beachten Sie, dass alte Browser einen null Wert für den vorherigen this.files Anruf zurückkehren wird, so this.files[0] Zugriff wird eine Ausnahme ausgelöst, und Sie sollten href="https://stackoverflow.com/a/20550591/429521"> Check vor der Verwendung

Answer 2

Wenn Sie jQuery validate Sie, indem diese Methode verwenden:

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

Answer 3

Mit diesem Code:

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

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

Auf FF 3.6 und später soll dieser Code sein:

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

Answer 4

Ich veröffentliche meine Lösung auch für eine ASP.NET FileUpload Kontrolle verwendet. Vielleicht wird jemand es nützlich finden.

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

Answer 5

Verwenden Sie die folgende Datei der Größe und klar zu überprüfen, ob es größer,

    $("input[type='file']").on("change", function () {
     if(this.files[0].size > 2000000) {
       alert("Please upload file less than 2MB. Thanks!!");
       $(this).val('');
     }
    });

Answer 6

Sie können diese Art tun mit Flash oder Silverlight zu prüfen, aber nicht Javascript. Die Javascript-Sandbox erlaubt keinen Zugriff auf das Dateisystem. Die Größe Prüfung müßte getan Server-Seite werden, nachdem es hochgeladen wurde.

Wenn Sie die Silverlight / Flash Weg gehen möchten, können Sie das überprüfen, ob sie nicht installiert sind, um eine normale Datei-Upload-Handler auf Standard, der die normalen Kontrollen verwendet. Auf diese Weise, wenn die tun haben Silverlight / Flash installiert ihre Erfahrung ein bisschen reicher sein wird.

Answer 7

<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 dies die am einfachsten zu sein, wenn Sie auf eingereicht Form durch Standard ajax / html5 Methoden nicht planen, aber natürlich funktioniert es mit irgendetwas.

NOTES:

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

Diese Arbeit verwendet, aber es funktioniert nicht mehr in Chrom, ich getestet nur den Code oben und es funktionierte sowohl in ff und Chrom (neuesten). Die zweite [ "0"] ist jetzt first.

Answer 8

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