Holen Sie sich die Dateigröße vor dem Hochladen

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

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?

<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

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.

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.

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

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

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

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

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

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

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.

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.

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.