Holen Sie sich die Dateigröße vor dem Hochladen

Question 1

Gibt es eine Möglichkeit, die Dateigröße herauszufinden, bevor die Datei mit AJAX / PHP hochgeladen wird, wenn sich die Eingabedatei ändert?

Question 2

Für das HTML unten

<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 Dateieingabegröße mit jQuery?

Question 3

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 der Inhalt hinzugefügt oder geändert wird, aber Sie können immer noch files[0].size ohne jQuery zu verwenden.

$(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, etwas Proof-of-Concept-Code dazu Drag-and-Drop-Dateien in FormData und per POST auf einen Server hochladen. Es enthält eine einfache Überprüfung der Dateigröße.

Question 4

<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();" />

Arbeite an IE und FF

Question 5

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

Nachdem ich mir Zeit genommen hatte, herumzustöbern, fand ich endlich die Antwort. Dies ist mein Code, um Dateianhänge mit jQuery zu erhalten:

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 gerne ändern, um Ihre Anforderungen zu erfüllen.

Question 6

Beste Lösung, die auf allen Browsern funktioniert 😉

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

AKTUALISIEREN :
Wir verwenden diese Funktion, um zu überprüfen, ob es sich um den 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;
}

Question 7

$(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>

Question 8

Browser mit HTML5-Unterstützung haben die Dateieigenschaft 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);
}