Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
PHP runs on the web server. So it can't do very much to prevent users from submitting a form that attempts to upload files in excess of the server limits. Its sole protection within the browser is the Max_File_Size hidden field, which you can see here on line 52 of form.php. It sets the size limit for individual files. But there are no checks on the number of files nor on their combined size until the data is received by the server.
So what we're going to do, is to create some custom attributes inside the file input field to store these values. So let's go back down to the form, and the file input field is here on line 54. Let's just add a couple of lines before the closing angle bracket, and then we're going to put in data-maxfiles. These data attributes, they're new to HTML5. You can create custom attributes if they're prefixed by data hyphen.
So just before the closing body tag, script src, and we're going to use a file that you can find in the exercise files for this video. It's called check multiple.js. And I've put it in my js folder. So js / checkmultiple.js. So we can now save the form. And then if I just open my file system, there in the js folder is checkmultiple.js.
And then the next line binds a function called countFiles to the fields change event. And countFiles is defined down here. The code on line eight gets the number of files that have been selected. Then the code on line nine, gets the value of Max_File_Size. And then lines ten, 11 and 12, get the files of data-maxfiles, data-postmax and data-displaymax. The for loop on lines 18 through to 23, get the Submit button, and then a second for loop down here, goes through the files that have been selected.
If a file is too big, it's added to an array. And the loop also calculates the combined total of all the file sizes, and then down at the bottom there is a series of conditional statements, these build a message if there's any problem. And they also disable the Submit button. As long as you use the same data attributes as I have, this count files function can be applied to any form input field, all you need to do is change the Id in line one at the top.
So let's run our form in a browser and test it. So I'm going to select all of the files in this folder. I know that there are 25, and I also know there's a very big one, which will make it exceed postmax size. So let's see what happens when we select them. There is an alert message, it says that the following files are too big. There are four of them. It also tells me the combined total exceeds eight megabytes. And I've selected more than 20 files. And the Upload button, the Submit button is disabled.
Even when I click OK, it remains disabled. So I won't be able to submit the form, until I've removed problem files. So if we open it again, and select all of them. Except that very large problem file I still get an error message I'm told that three files are to big and that I've selected more than 20 files. Click OK, I'm still disabled but if I open this and select a number of files that are within the limits.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101284 Viewers
61 Video lessons · 88043 Viewers
71 Video lessons · 71897 Viewers
56 Video lessons · 103729 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.