it-swarm.com.de

Rufen Sie vor dem Hochladen die Dateigröße ab

Gibt es eine Möglichkeit, die Dateigröße herauszufinden, bevor Sie die Datei mit AJAX/PHP im Änderungsereignis der Eingabedatei hochladen?

77
Nisanth Kumar

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 prüfe ich die Dateigröße mit jQuery?

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

Arbeiten Sie an IE und FF

14
Behnam Bakhshi

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

$(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 paar Proof-of-Concept-Codes für Ziehen und Ablegen von Dateien in FormData und Hochladen über POST auf einen Server. Es enthält eine einfache Überprüfung der Dateigröße.

12
jaggedsoft

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

Nachdem ich mich Zeit erkundete, fand ich endlich die Antwort. Dies ist mein Code zum Anhängen von Dateien mit jQuery:

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 nach Ihren Wünschen ändern.

7
Hoang Le

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

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

UPDATE: Wir werden diese Funktion verwenden, um zu prüfen, ob es IE Browser ist 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;
}
6
ucefkh

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);
}
2
Sandeep G

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

2
vishay hard

sie müssen eine Ajax-Anforderung HEAD 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"));
    }
  });
1
kasper Taeymans

Bitte verwenden Sie nicht ActiveX, da in Internet Explorer möglicherweise eine beängstigende Warnmeldung angezeigt wird und Ihre Benutzer davon abgeschreckt werden. 

 ActiveX warning

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

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

die Lösung von ucefkh hat am besten funktioniert, aber da $ .browser in jQuery 1.91 nicht mehr unterstützt wird, musste navigator.userAgent geändert werden:

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

Sie können die HTML5-Datei-API verwenden: http://www.html5rocks.com/de/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.

0
José P. Airosa

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

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

0
scott stone

Sie können die PHP -Dateigrößenfunktion verwenden. Bitte überprüfen Sie während des Uploads mit ajax zuerst die Dateigröße, indem Sie eine Anforderung an eine Ajax-Anforderung an ein PHP-Skript senden, die die Dateigröße überprüft und den Wert zurückgibt.

0
rechie