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


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, aber jetzt ist der Trend, Flash in Web-Apps zu vermeiden. Gibt es eine Möglichkeit, die Dateigröße auf der Clientseite mit HTML5 zu überprüfen?


76
2017-11-06 09:26


Ursprung


Antworten:


Das funktioniert. Platzieren Sie es in einem Ereignis-Listener für den Fall, dass sich die Eingabe ändert.

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

116
2017-11-29 20:38



Die angenommene Antwort ist tatsächlich korrekt, aber Sie müssen sie an einen Ereignis-Listener binden, damit sie bei jeder Änderung der Dateieingabe aktualisiert 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 nützlich 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);
  }
});

Angesichts der Tatsache, dass die Konvertierung der Dateigröße angezeigt wird, in welcher Metrik Sie sich befinden.


25
2017-07-20 18:53



HTML5 fie api unterstützt die Überprüfung der Dateigröße.

Lesen Sie diesen Artikel, um mehr über Datei-API zu erfahren

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

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


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

Ähnlich Datei-API gibt Name und Typ.


7
2017-08-31 05:27



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

3
2017-10-04 14:52



"Keine einfache, browserübergreifende Lösung, um dies zu erreichen": Datei-Upload-Größe auf der Client-Seite erkennen?


2
2017-11-06 09:35



Hochladen kann Dateien mit HTML5 hochladen. Auch gibt es eine Flash-Version.

Sie können die Grenzen für die Dateigröße festlegen, mit 'fileSizeLimit'Parameter.


-2
2018-01-09 04:27