Holen Sie sich die Dateigröße vor dem Hochladen

89

Gibt es eine Möglichkeit, die Dateigröße zu ermitteln, bevor die Datei mit AJAX / PHP im Änderungsereignis der Eingabedatei hochgeladen wird?

Nisanth Kumar
quelle
2
und offensichtlich ein Duplikat von stackoverflow.com/search?q=file+size+before+upload
Your Common Sense
Hier ist eine Schritt-für-Schritt-Anleitung zum Abrufen
Satinder singh
Mögliches Duplikat der Überprüfung der Upload-Größe
Frank Tan

Antworten:

132

Für den HTML-Balg

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

});

Siehe folgenden Thread:

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

Brij
quelle
1
Ist das Dateiarray im Internet Explorer (ältere Versionen) nicht vorhanden?
Tiago César Oliveira
4
Ja, dies funktioniert nicht vor IE 10 und hat nur teilweise Unterstützung in Android und iOS. caniuse.com/fileapi . Wenn es nur so einfach wäre ...
Styks
2
Ich nehme an, das Ergebnis ist in Bytes?
Erdal G.
4
@ErdalG. Gute Frage! In MDN fehlt die Dokumentation, es handelt sich jedoch FileList.filesum ein Array von FileObjekten, bei dem es sich um eine Erweiterung von handelt Glob. Und nach dem spec , Globdefiniert in der Tat die sizeEigenschaft als die Anzahl der Bytes (0 für eine leere Datei). Also ja, das Ergebnis ist in Bytes .
John Weisz
14
<script type="text/javascript">
function AlertFilesize(){
    if(window.ActiveXObject){
        var fso = new ActiveXObject("Scripting.FileSystemObject");
        var filepath = document.getElementById('fileInput').value;
        var thefile = fso.getFile(filepath);
        var sizeinbytes = thefile.size;
    }else{
        var sizeinbytes = document.getElementById('fileInput').files[0].size;
    }

    var fSExt = new Array('Bytes', 'KB', 'MB', 'GB');
    fSize = sizeinbytes; i=0;while(fSize>900){fSize/=1024;i++;}

    alert((Math.round(fSize*100)/100)+' '+fSExt[i]);
}
</script>

<input id="fileInput" type="file" onchange="AlertFilesize();" />

Arbeit an IE und FF

Behnam Bakhshi
quelle
15
herabgestimmt, weil die Antwort ActiveX verwendet. 2015 gibt sogar Microsoft ActiveX auf. Obwohl dies ein vernünftiger Vorschlag war, würde ich Entwicklern empfehlen, dies jetzt und in Zukunft zu vermeiden.
Scott Stone
3
Ich mag diese Lösung, weil nur ältere Versionen von IE für window.ActiveXObject true zurückgeben.
Rob Breidecker
@scottstone Ich verstehe nicht, warum Sie alle Antworten, die ältere Browser unterstützen, abgelehnt haben? Diese Antwort ist viel sauberer als die mit Browser-Fingerabdrücken und empfiehlt niemandem, ActiveX zu verwenden.
Nicolas Bouvrette
@NicolasBouvrette - Ich stimme zu, dass diese Antwort viel sauberer ist als die anderen, aber ich kann die Ablehnung derzeit nicht entfernen. In der ursprünglichen Frage wurde nicht nach der Kompatibilität mit alten IE-Versionen gefragt, und diese Antwort weist die Leser nicht darauf hin, dass der größte Teil des Codes für die Unterstützung von über 5 Jahre alten IE-Versionen vorgesehen ist.
Scott Stone
@scottstone Ein weiterer konkreter Punkt aus meiner Sicht, warum ActiveX nicht verwendet werden soll, ist, dass im IE eine Warnmeldung angezeigt wird, die eine schreckliche (beängstigende?) Benutzererfahrung darstellt.
Nicolas Bouvrette
13

Hier ist ein einfaches Beispiel, wie Sie die Größe einer Datei vor dem Hochladen ermitteln können. Es verwendet jQuery, um zu erkennen, wann immer der Inhalt hinzugefügt oder geändert wird, aber Sie können trotzdem files[0].sizeohne jQuery abrufen.

$(document).ready(function() {
  $('#openFile').on('change', function(evt) {
    console.log(this.files[0].size);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
  <input id="openFile" name="img" type="file" />
</form>

Hier ist ein vollständigeres Beispiel, ein Proof-of-Concept-Code zum Ziehen und Ablegen von Dateien in FormData und zum Hochladen per POST auf einen Server. Es enthält eine einfache Überprüfung der Dateigröße.

jaggedsoft
quelle
8

Ich hatte das gleiche Problem und es scheint, als hätten wir keine genaue Lösung gefunden. Hoffe das kann anderen Menschen helfen.

Nachdem ich mir etwas Zeit genommen hatte, fand ich endlich die Antwort. Dies ist mein Code, um Dateien mit jQuery anzuhängen:

var attach_id = "id_of_attachment_file";
var size = $('#'+attach_id)[0].files[0].size;
alert(size);

Dies ist nur der Beispielcode zum Abrufen der Dateigröße. Wenn Sie andere Dinge tun möchten, können Sie den Code jederzeit ändern, um Ihre Anforderungen zu erfüllen.

Hoang Le
quelle
Ich mag dieses, weil es nicht wie die beliebteste Lösung auf das Änderungsereignis gesetzt werden muss. Und ich mag auch die Tatsache, dass Sie mir die Erlaubnis gegeben haben, den Code zu ändern, um meine Bedürfnisse zu befriedigen :)
Matt
8

Beste Lösung für alle Browser;)

function GetFileSize(fileid) {
    try {
        var fileSize = 0;
        // for IE
        if(checkIE()) { //we could use this $.browser.msie but since it's deprecated, we'll use this function
            // before making an object of ActiveXObject, 
            // please make sure ActiveX is enabled in your IE browser
            var objFSO = new ActiveXObject("Scripting.FileSystemObject");
            var filePath = $("#" + fileid)[0].value;
            var objFile = objFSO.getFile(filePath);
            var fileSize = objFile.size; //size in b
            fileSize = fileSize / 1048576; //size in mb 
        }
        // for FF, Safari, Opeara and Others
        else {
            fileSize = $("#" + fileid)[0].files[0].size //size in b
            fileSize = fileSize / 1048576; //size in mb 
        }
        alert("Uploaded File Size is" + fileSize + "MB");
    }
    catch (e) {
        alert("Error is :" + e);
    }
}

von http://www.dotnet-tricks.com/Tutorial/jquery/HHLN180712-Get-file-size-before-upload-using-jquery.html

UPDATE: Mit dieser Funktion prüfen wir, ob es sich um einen IE-Browser handelt oder nicht

function checkIE() {
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)){  
        // If Internet Explorer, return version number
        alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
    } else {
        // If another browser, return 0
        alert('otherbrowser');
    }

    return false;
}
ucefkh
quelle
3
herabgestimmt, weil die Antwort ActiveX verwendet. 2015 gibt sogar Microsoft ActiveX auf. Obwohl dies ein vernünftiger Vorschlag war, würde ich Entwicklern empfehlen, dies jetzt und in Zukunft zu vermeiden. -
Scott Stone
1
$ .browser wurde in Version 1.9 aus jQuery entfernt (veraltet seit Version 1.3).
Silvio Delgado
2
@scottstone dies ist für die Abwärtskompatibilität und das ist nicht wahr Microsoft wird ActiveX nicht abdonieren, es wird in vielen Dingen zu oft verwendet und hier ist der Beweis computerworld.com/article/2481188/internet/…
ucefkh
@ SilvioDelgado Geändert und aktualisiert haben sie $ .browser in ein Plugin entfernt, so dass wir nur einen kleinen Test für den IE-Browser benötigen (funktioniert mit allen Versionen)
ucefkh
4

$(document).ready(function() {
  $('#openFile').on('change', function(evt) {
    console.log(this.files[0].size);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
  <input id="openFile" name="img" type="file" />
</form>

vishay schwer
quelle
3

Browser mit HTML5-Unterstützung verfügen über die Eigenschaft files für den Eingabetyp. Dies funktioniert natürlich nicht in älteren IE-Versionen.

var inpFiles = document.getElementById('#fileID');
for (var i = 0; i < inpFiles.files.length; ++i) {
    var size = inpFiles.files.item(i).size;
    alert("File Size : " + size);
}
Sandeep G.
quelle
2

Die Lösung von ucefkh funktionierte am besten, aber da $ .browser in jQuery 1.91 veraltet war, musste geändert werden, um navigator.userAgent zu verwenden:

function IsFileSizeOk(fileid) {
    try {
        var fileSize = 0;
        //for IE
        if (navigator.userAgent.match(/msie/i)) {
            //before making an object of ActiveXObject, 
            //please make sure ActiveX is enabled in your IE browser
            var objFSO = new ActiveXObject("Scripting.FileSystemObject");
            var filePath = $("#" + fileid)[0].value;
            var objFile = objFSO.getFile(filePath);
            var fileSize = objFile.size; //size in b
            fileSize = fileSize / 1048576; //size in mb 
        }
        //for FF, Safari, Opeara and Others
        else {
            fileSize = $("#" + fileid)[0].files[0].size //size in b
            fileSize = fileSize / 1048576; //size in mb 
        }
        return (fileSize < 2.0);
    }
    catch (e) {
        alert("Error is :" + e);
    }
}
Mike
quelle
1

Sie müssen eine Ajax-HEAD-Anforderung ausführen, um die Dateigröße zu erhalten. mit jquery ist es so etwas

  var req = $.ajax({
    type: "HEAD",
    url: yoururl,
    success: function () {
      alert("Size is " + request.getResponseHeader("Content-Length"));
    }
  });
Kasper Taeymans
quelle
Aber wenn diese Dateieingabe gelöscht wird (leer)? Können Sie ein Beispiel machen, danke
DeLe
1

Bitte nicht verwenden, ActiveXda die Wahrscheinlichkeit groß ist, dass im Internet Explorer eine beängstigende Warnmeldung angezeigt wird, die Ihre Benutzer abschreckt.

ActiveX-Warnung

Wenn jemand diese Prüfung implementieren möchte, sollte er sich nur auf das FileList- Objekt verlassen, das in modernen Browsern verfügbar ist, und sich nur für ältere Browser auf serverseitige Prüfungen verlassen ( progressive Verbesserung ).

function getFileSize(fileInputElement){
    if (!fileInputElement.value ||
        typeof fileInputElement.files === 'undefined' ||
        typeof fileInputElement.files[0] === 'undefined' ||
        typeof fileInputElement.files[0].size !== 'number'
    ) {
        // File size is undefined.
        return undefined;
    }

    return fileInputElement.files[0].size;
}
Nicolas Bouvrette
quelle
0

Sie können die PHP-Dateigrößenfunktion verwenden. Überprüfen Sie beim Hochladen mit Ajax zuerst die Dateigröße, indem Sie eine Anfrage an eine Ajax-Anfrage an ein PHP-Skript senden, die die Dateigröße überprüft und den Wert zurückgibt.

rechie
quelle
0

Sie können die HTML5-Datei-API verwenden: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Sie sollten jedoch immer einen Fallback für PHP (oder eine andere von Ihnen verwendete Backend-Sprache) für ältere Browser haben.

José P. Airosa
quelle
0

Persönlich würde ich sagen, dass die Antwort von Web World angesichts der HTML-Standards heute die beste ist. Wenn Sie IE <10 unterstützen müssen, müssen Sie eine Form von ActiveX verwenden. Ich würde die Empfehlungen vermeiden, die das Codieren gegen Scripting.FileSystemObject oder das direkte Instanziieren von ActiveX beinhalten.

In diesem Fall hatte ich Erfolg mit JS-Bibliotheken von Drittanbietern wie plupload, die so konfiguriert werden können, dass HTML5-APIs oder Flash / Silverlight-Steuerelemente zum Auffüllen von Browsern verwendet werden, die diese nicht unterstützen. Plupload verfügt über eine clientseitige API zum Überprüfen der Dateigröße, die im IE <10 funktioniert.

Scott Stone
quelle