Sprawdź rozmiar pliku przed przesłaniem


90

Czy istnieje sposób, aby sprawdzić rozmiar pliku przed załadowaniem pliku za pomocą AJAX / PHP w przypadku zmiany pliku wejściowego?




Oto samouczek krok po kroku, jak uzyskać nazwę pliku, typ i rozmiar codepedia.info/…
Satinder singh

Odpowiedzi:


133

Do HTML poniżej

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

spróbuj następujących rzeczy:

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

});

Zobacz następujący wątek:

Jak sprawdzić rozmiar pliku wejściowego za pomocą jQuery?


1
Czy tablica plików nie istnieje w przeglądarce Internet Explorer (starsze wersje)?
Tiago César Oliveira

4
Tak, to nie działa wcześniej niż IE 10 i ma tylko częściową obsługę w systemach Android i iOS. caniuse.com/fileapi . Gdyby to było tylko takie proste ...
trwa

2
Przypuszczam, że wynik jest w bajtach?
Erdal G.

4
@ErdalG. Dobre pytanie! W MDN brakuje dokumentacji, ale FileList.filesjest to tablica Fileobiektów, która jest rozszerzeniem Glob. I według specyfikacji , Globw rzeczywistości określa sizewłasności jak liczba bajtów (0 do pustej pliku). Więc tak, wynik jest w bajtach .
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();" />

Pracuj nad IE i FF


15
odrzucony, ponieważ odpowiedź używa formantów ActiveX. w 2015 roku nawet Microsoft porzuca ActiveX. Chociaż była to rozsądna sugestia, zalecałbym programistom unikanie tego teraz i w przyszłości.
Scott Stone

3
Podoba mi się to rozwiązanie, ponieważ tylko starsze wersje IE będą zwracać true dla window.ActiveXObject.
Rob Breidecker

@scottstone Nie rozumiem, dlaczego przegłosowałeś wszystkie odpowiedzi dotyczące starszych przeglądarek? Ta odpowiedź jest znacznie czystsza niż te, które używają odcisków palców przeglądarki i w żadnym wypadku nie zalecają nikomu korzystania z ActiveX.
Nicolas Bouvrette

@NicolasBouvrette - Zgadzam się, że ta odpowiedź jest znacznie czystsza niż inne, ale na tym etapie nie mogę usunąć negatywnego głosu. Pierwotne pytanie nie dotyczyło kompatybilności ze starymi wersjami IE, a ta odpowiedź nie radzi czytelnikom, że większość kodu obsługuje wersje IE starsze niż 5 lat.
Scott Stone

@scottstone Właściwie jeszcze jeden namacalny punkt z mojego punktu widzenia, dlaczego nie używać ActiveX, jest taki, że wyświetla komunikat ostrzegawczy w IE, co jest okropnym (przerażającym?) doświadczeniem użytkownika.
Nicolas Bouvrette

13

Oto prosty przykład pobierania rozmiaru pliku przed przesłaniem. Używa jQuery do wykrywania, gdy zawartość jest dodawana lub zmieniana, ale nadal można to uzyskać files[0].sizebez korzystania z jQuery.

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

Oto bardziej kompletny przykład, trochę kodu koncepcyjnego do przeciągania i upuszczania plików do FormData i przesyłania za pośrednictwem POST na serwer. Zawiera proste sprawdzenie rozmiaru pliku.


8

Miałem ten sam problem i wygląda na to, że nie mieliśmy dokładnego rozwiązania. Mam nadzieję, że to pomoże innym ludziom.

Po poświęceniu czasu na zwiedzanie w końcu znalazłem odpowiedź. To jest mój kod do pobrania pliku za pomocą jQuery:

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

To jest tylko przykładowy kod do pobierania rozmiaru pliku. Jeśli chcesz robić inne rzeczy, możesz zmienić kod, aby zaspokoić swoje potrzeby.


Podoba mi się to, ponieważ nie trzeba go umieszczać na wydarzeniu zmiany, jak najpopularniejsze rozwiązanie. Podoba mi się również to, że dałeś mi pozwolenie na zmianę kodu w celu zaspokojenia moich potrzeb :)
Matt

8

Najlepsze rozwiązanie działające na wszystkich przeglądarkach;)

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

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

AKTUALIZACJA: Użyjemy tej funkcji, aby sprawdzić, czy jest to przeglądarka IE, czy nie

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

3
odrzucony, ponieważ odpowiedź używa formantów ActiveX. w 2015 roku nawet Microsoft porzuca ActiveX. Chociaż była to rozsądna sugestia, zalecałbym programistom unikanie tego teraz i w przyszłości. -
scott stone

1
$ .browser został usunięty z jQuery w wersji 1.9 (przestarzały od wersji 1.3).
Silvio Delgado,

2
@scottstone to jest dla wstecznej kompatybilności i to nieprawda Microsoft nie będzie rezygnować z ActiveX, jest on zbyt często używany w wielu rzeczach, a oto dowód computerworld.com/article/2481188/internet/ ...
ucefkh

@SilvioDelgado Zmienione i uaktualnione one usunięte $ .browser do wtyczki więc musimy tylko mały test dla przeglądarki IE (działa ze wszystkimi wersjami)
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>


3

Przeglądarki obsługujące HTML5 mają właściwość files dla typu danych wejściowych. To oczywiście nie zadziała w starszych wersjach IE.

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

Rozwiązanie ucefkh działało najlepiej, ale ponieważ $ .browser był przestarzały w jQuery 1.91, musiałem zmienić go na navigator.userAgent:

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

musisz wykonać żądanie AJAX HEAD, aby uzyskać rozmiar pliku. z jquery wygląda to mniej więcej tak

  var req = $.ajax({
    type: "HEAD",
    url: yoururl,
    success: function () {
      alert("Size is " + request.getResponseHeader("Content-Length"));
    }
  });

Ale jeśli to zrobisz, wejście pliku zostanie wyczyszczone (puste)? Czy możesz zrobić przykład, dziękuję
DeLe

1

Nie używaj go, ActiveXponieważ jest szansa, że ​​wyświetli przerażający komunikat ostrzegawczy w przeglądarce Internet Explorer i odstraszy użytkowników.

Ostrzeżenie ActiveX

Jeśli ktoś chce zaimplementować tę kontrolę, powinien polegać tylko na obiekcie FileList dostępnym w nowoczesnych przeglądarkach i polegać na sprawdzaniu po stronie serwera tylko w przypadku starszych przeglądarek ( stopniowe ulepszanie ).

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

0

Możesz użyć funkcji rozmiaru plików PHP. Podczas przesyłania za pomocą AJAX, sprawdź najpierw rozmiar pliku, wysyłając żądanie AJAX do skryptu PHP, który sprawdza rozmiar pliku i zwraca wartość.



0

Osobiście powiedziałbym, że odpowiedź Web World jest dziś najlepsza, biorąc pod uwagę standardy HTML. Jeśli potrzebujesz obsługi IE <10, będziesz musiał użyć jakiejś formy ActiveX. Unikałbym zaleceń, które obejmują kodowanie przeciwko Scripting.FileSystemObject lub bezpośrednie tworzenie instancji ActiveX.

W tym przypadku odniosłem sukces używając zewnętrznych bibliotek JS, takich jak plupload, które można skonfigurować do używania interfejsu API HTML5 lub kontrolek Flash / Silverlight do wypełniania przeglądarek, które ich nie obsługują. Plupload ma interfejs API po stronie klienta do sprawdzania rozmiaru pliku, który działa w IE <10.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.