Client Überprüfen der Dateigröße mit HTML5?


84

Ich versuche, die HTML5-Welle zu fahren, aber ich stehe vor einem kleinen Problem. Vor HTML5 haben wir die Dateigröße mit Flash überprüft. Jetzt geht der Trend dahin, die Verwendung von Flash in Web-Apps zu vermeiden. Gibt es eine Möglichkeit, die Dateigröße auf der Clientseite mit HTML5 zu überprüfen?

Antworten:


125

Das funktioniert. Platzieren Sie es in einem Ereignis-Listener, wenn sich die Eingabe ändert.

if (typeof FileReader !== "undefined") {
    var size = document.getElementById('myfile').files[0].size;
    // check file size
}

Es funktioniert für mich in IE 10, Mozilla FFx und Chrome. Vielen Dank!
Rahnzo

funktioniert gut, Sie verwenden es einfach nicht richtig; Melden Sie sich beim onchange-Ereignis der Eingabe an, und alles wird gut.
Dandavis

@ Dandavis Ich verwende den Code in der Antwort. Wenn der Code einwandfrei funktioniert, warum muss ich ihn ändern?
Chuck Le Butt

1
@Chuck Ihr Beispiel funktioniert nicht, weil Sie versuchen, die Dateiliste beim Laden der Seite zu lesen, bevor Sie eine Datei auswählen.
ungefähr

1
@Chuck: ok, es funktioniert einwandfrei und du hast es ok eingefügt, aber es allein reicht nicht aus. Wenn Sie es nach dem Auffüllen der Datei in der Konsole ausführen, funktioniert es einwandfrei. Für Apps ist die Konsole nicht gut. Sie sollten den Code daher in ein Ereignis einfügen, das ausgeführt wird, nachdem die Eingabe ausgefüllt wurde, damit er wie erwartet funktioniert. Entschuldigung für das Missverständnis.
Dandavis

32

Die akzeptierte Antwort ist tatsächlich korrekt, aber Sie müssen sie an einen Ereignis-Listener binden, damit sie aktualisiert wird, wenn die Dateieingabe geändert wird.

document.getElementById('fileInput').onchange = function(){
    var filesize = document.getElementById('fileInput').files[0].size;
    console.log(filesize);    
}

Wenn Sie die jQuery-Bibliothek verwenden, kann der folgende Code hilfreich sein

$('#fileInput').on('change',function(){
  if($(this).get(0).files.length > 0){ // only if a file is selected
    var fileSize = $(this).get(0).files[0].size;
    console.log(fileSize);
  }
});

Vorausgesetzt, die Konvertierung der Dateigröße zur Anzeige in welcher Metrik auch immer, liegt bei Ihnen.


Ihr jQuery-Beispiel funktioniert nicht. Sie scheinen jQuery anscheinend nicht verwenden zu können mit .files: jsfiddle.net/edxvo4wa (Ich habe dies selbst entdeckt, als ich eine Lösung gefunden habe - es funktioniert, wenn Sie es ändern document.getElementById).
Chuck Le Butt

1
@Chuck Entschuldigung für den Fehler dort, ich habe meine Antwort mit der funktionierenden aktualisiert
Ammadu

7

HTML5 fie api unterstützt das Überprüfen der Dateigröße.

Lesen Sie diesen Artikel, um weitere Informationen zur Datei-API zu erhalten

http://www.html5rocks.com/de/tutorials/file/dndfiles/

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


var size = document.getElementById("fileInput").files[0].size;

In ähnlicher Weise gibt die Datei-API Name und Typ an.


3

Persönlich würde ich mich für dieses Format entscheiden:

    $('#inputFile').bind('change', function(e) {
      var data = e.originalEvent.target.files[0];
      // and then ...
      console.log(data.size + "is my file's size");
      // or something more useful ...
      if(data.size < 500000) {
        // what your < 500kb file will do
      }
    }

1
Ich glaube, 500kb wären tatsächlich 500 * 1024. Keine große Sache, aber Endbenutzer mit einer 500.000b-Datei würden es als 488kb ansehen und ablehnen. Und hier beginnt die große Frustration
Apolo

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.