Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,974 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
At the end of this course, you'll have a robust, flexible class that can be incorporated into many projects (including web forms) with just a few lines of code.
- How PHP handles file uploads
- Setting the maximum file size
- Moving the file to its destination
- Creating and using a namespaced class
- Displaying error messages
- Restricting unacceptable MIME types and file extensions
- Using the class
- Reporting errors
- Altering the user
Skill Level Intermediate
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.