Czy istnieje sposób, aby sprawdzić rozmiar pliku przed załadowaniem pliku za pomocą AJAX / PHP w przypadku zmiany pliku wejściowego?
javascript
jquery
ajax
file-upload
filesize
Nisanth Kumar
źródło
źródło
Odpowiedzi:
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?
źródło
FileList.files
jest to tablicaFile
obiektów, która jest rozszerzeniemGlob
. I według specyfikacji ,Glob
w rzeczywistości określasize
własności jak liczba bajtów (0 do pustej pliku). Więc tak, wynik jest w bajtach .<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
źródło
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].size
bez 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>
źródło
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.
źródło
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; }
źródło
$(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>
źródło
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); }
źródło
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); } }
źródło
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")); } });
źródło
Nie używaj go,
ActiveX
ponieważ jest szansa, że wyświetli przerażający komunikat ostrzegawczy w przeglądarce Internet Explorer i odstraszy użytkowników.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; }
źródło
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ść.
źródło
Możesz użyć interfejsu API plików HTML5: http://www.html5rocks.com/en/tutorials/file/dndfiles/
Jednak zawsze powinieneś mieć awaryjną wersję PHP (lub innego używanego języka zaplecza) dla starszych przeglądarek.
źródło
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.
źródło