PHP-and-MySQL/C4/File-Upload-Part-1/English
From Script | Spoken-Tutorial
Time | Narration |
---|---|
0:00 | Hi. In this tutorial I'll show you how to create a simple php upload script. |
0:05 | This will be slightly more advanced in our upload dot php file. |
0:10 | We will use our index dot php. We will be mainly using html code to give a form to the user to submit this particular file. |
0:20 | Then in upload dot php we will process this file, get some information about the file like its name, its type, size, temporary stored name and any error messages that have occurred. |
0:33 | You can use the error messages to check if it has occurred or hasn't occurred. |
0:38 | Then we are going to process the file and save it in a specific directory on our web server. |
0:45 | In the second part of this tutorial, I'll quickly teach you how to check the specific file type so you can protect it against file types. |
0:54 | We will also learn how to check the file size of the file so you can have a maximum or minimum file size. |
01:04 | So here I've created a folder named 'uploaded' in which I've created my index and upload dot php files. |
01:13 | And this is where my files are being stored once they have been uploaded. |
01:17 | When the files are uploaded initially they go into a temporary area on the web server and NOT into this folder. |
01:25 | For the html - we need to create a form. To do this we have a form action and we have a specific action which is 'upload dot php' and we've created our file here. |
01:38 | The method is set to POST. The reason for this is that we don't need to store it in a GET variable. |
01:45 | Why? Because we don't want the user to see the binary data we're sending across the website, for security reasons. |
01:53 | And also there is a hundred character limit on our GET variable. |
01:58 | So you’ll have a very small file if you have only hundred bits of data. |
02:04 | Okay, we have another parameter which you may not have heard of before. |
02:11 | It's enctype, encoding type which means how we are going to encode this. |
02:20 | It will be multi-part and we need a forward slash and then its form data. |
02:28 | In short this means that we're submitting this form in the form of data - that is, binary data - zeroes and ones which I mentioned earlier over here. |
02:40 | Okay so we've got the type this is going to be encoded to. We'll end our form here. |
02:50 | We'll need some elements inside as input for our file. |
02:57 | This type is set to file and we'll call it myfile to be specific. |
03:04 | Okay - paragraph break here and then all we need is a submit button, |
03:12 | Okay so lets just preview this. Lets close this off. |
03:18 | Click file upload. Oh - lets go back. Input - I typed 2 'u's here. |
03:27 | Lets go back. You can see here we got our input here. |
03:31 | I can make it browse. We can see we got a selection of files which we can upload. |
03:36 | Okay - so lets make it more user friendly for you and me. |
03:45 | Upload a file. And lets refresh that. Okay so we've got a nice page here. |
03:50 | We've got our header and possibility to upload a file here. Also can be manually typed in here if needed. |
03:58 | And also we have an upload button which submits to our upload dot php. |
04:04 | Fine. So inside upload dot php we need a way of processing this file which has been submitted from our form. |
04:13 | The way to do this is by using dollar underscore FILES. This isn't actually right. |
04:19 | We can tell it isn't right by echoing out just a single instance of this. |
04:27 | When we do and I click on upload, we can see we just get Array. That's because this is an array. |
04:33 | Since this is a multidimensional array, in the first set of brackets we'll type the name of the file that we have uploaded and the name of the input box from which it came from - that is myfile. |
04:49 | So we'll use myfile here. And in the second one we can have a variety of properties and the simplest and most easy one to think about is the name of the file. |
04:59 | So lets go back to the upload form and lets choose intro dot avi. It will be displayed here. |
05:06 | Lets click upload and on the next page we see intro dot avi. |
05:11 | Remember this is in our upload dot php form, file sorry. |
05:16 | Okay so that's that. Let me just save this to a variable. |
05:22 | The next one we'll look at is - I'll just type it here - is the type of file. |
05:30 | So this is dollar underscore files and we'll use the myname reference. |
05:38 | And inside here we'll have the type. So that's type or rather we'll echo this out so you can see. |
05:45 | And it's refresh. Re-send that and see that now - myfile. |
05:54 | Right re-send that and we can see there's a video slash avi. You may have seen this somewhere before in html. |
06:00 | For example - this can be image slash png or image slash jpeg, image slash bmp , video slash avi and video slash mpeg or some other format. |
06:11 | At the moment we can see from here that it is an avi file so therefore that's what we get in 'type'. |
06:18 | So we can say type equals all of this. |
06:22 | The next one I'll show you is the size. So to save time what I'll do is - I'll copy this code,paste it here and change this type to size and echo it out. |
06:30 | You can see it's quite simple to get e-property of the file you submit. |
06:35 | I'll refresh this page and click resend and we can get the size of the file. |
06:40 | Now lets say we round this off to about a million - a million bytes is in fact a...., |
06:47 | Sorry, a million bits is a megabyte. myfile is actually a mega byte. |
06:54 | So we've got a million megabyte of data here. |
06:58 | So lets save that in a variable called size. Ok? |
07:05 | Right then, the next one which is quite an important one is the 'temporary name'. |
07:09 | This is written slightly differently as tmp abbreviated to temp and underscore and name. |
07:18 | This will give us the directory that it's stored in temporarily until we transfer it to the folder of our choice. |
07:25 | So lets refresh this page. |
07:27 | Click on Resend and you can see that that's stored into an xampp cause I'm using this application |
07:33 | But if you're using an apache you can store php yourself. |
07:37 | You'll have apache here followed by your temporary file name. |
07:41 | You can see that this is a randomly generated name that has a tmp extension. |
07:45 | But it is useless to us at the moment. |
07:48 | So we can save that as temp file or temp. Lets type 'temp' in order to keep it short. |
07:55 | And the last one is 'error'. Now this will basically echo out a zero if everything is clear. |
08:00 | Again copy-paste and change that to error. |
08:03 | We should get zero at the moment because everything is written correctly. |
08:07 | And this will never be a negative value. |
08:12 | If it's more than zero it means that it's giving an error code which basically means that you have an error. |
08:21 | And let's say we'll store this in a variable called error. |
08:28 | Okay that's all for now. In the second part of this tutorial I'll show you how to upload your file by moving it from the temporary storage area to a specified area of your choice. |
08:39 | And what we'll do is we'll use this variable error to see if there are any errors. |
08:45 | If there are errors, then we'll echo it out and use the error code. |
08:49 | If not we'll take this temp and we'll use a specific function called 'move uploaded' file and we'll take that and store it in our uploaded directory created on my web server here. |
09:01 | And then after that I'll take you through some specifics to say - is this a jpeg? Yes then disallow jpeg image being uploaded or disallow specific file size. |
09:10 | Okay so tune in to Part-2. Thanks for watching. This is Joshua Mathew dubbing for the Spoken Tutorial Project. |