I am using this javascript that I got from here, and it works perfectly for what I need it to.
var _validFileExtensions = [".jpg", ".jpeg"]; function File_Validator(theForm){ var arrInputs = theForm.getElementsByTagName("input"); for (var i = 0; i < arrInputs.length; i++) { var oInput = arrInputs[i]; if (oInput.type == "file") { var sFileName = oInput.value; var blnValid = false; for (var j = 0; j < _validFileExtensions.length; j++) { var sCurExtension = _validFileExtensions[j]; if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) { blnValid = true; break; } } if (!blnValid) { alert("Invalid image file type!"); return false; } } } return true; }
Now, I was wondering if, in addition, I could check the file size and fail if the file is bigger than 500kb -> all before pressing the submit/upload button?
EDIT
After looking into what PHPMyCoder suggested, I end up solving by using this javascript code:
<script language='JavaScript'> function checkFileSize(inputFile) { var max = 3 * 512 * 512; // 786MB if (inputFile.files && inputFile.files[0].size > max) { alert("File too large."); // Do your thing to handle the error. inputFile.value = null; // Clear the field. } } </script>
This checks the file size, and alert the user before submitting the form.
For Traditional Web you could indeed use the BinaryDataSize action from the BinaryData API. For Reactive Web, if you want to check the file size before uploading the file to the server, you would need to check the file size at the client side.
The filesize() function in PHP is an inbuilt function which is used to return the size of a specified file. The filesize() function accepts the filename as a parameter and returns the size of a file in bytes on success and False on failure.
onchange = function() { if(this. files[0]. size > 2097152){ alert("File is too big!"); this. value = ""; }; };
On modern browsers (FF >= 3.6, Chrome >= 19.0, Opera >= 12.0, and buggy on Safari), you can use the HTML5 File API. When the value of a file input changes, this API will allow you to check whether the file size is within your requirements. Of course, this, as well as MAX_FILE_SIZE
, can be tampered with so always use server side validation.
<form method="post" enctype="multipart/form-data" action="upload.php"> <input type="file" name="file" id="file" /> <input type="submit" name="submit" value="Submit" /> </form> <script> document.forms[0].addEventListener('submit', function( evt ) { var file = document.getElementById('file').files[0]; if(file && file.size < 10485760) { // 10 MB (this size is in bytes) //Submit form } else { //Prevent default and display error evt.preventDefault(); } }, false); </script>
On the server side, it is impossible to stop an upload from happening from PHP because once PHP has been invoked the upload has already completed. If you are trying to save bandwidth, you can deny uploads from the server side with the ini setting upload_max_filesize
. The trouble with this is this applies to all uploads so you'll have to pick something liberal that works for all of your uploads. The use of MAX_FILE_SIZE
has been discussed in other answers. I suggest reading the manual on it. Do know that it, along with anything else client side (including the javascript check), can be tampered with so you should always have server side (PHP) validation.
On the server side you should validate that the file is within the size restrictions (because everything up to this point except for the INI setting could be tampered with). You can use the $_FILES
array to find out the upload size. (Docs on the contents of $_FILES
can be found below the MAX_FILE_SIZE
docs)
upload.php
<?php if(isset($_FILES['file'])) { if($_FILES['file']['size'] > 10485760) { //10 MB (size is also in bytes) // File too big } else { // File within size restrictions } }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With