- [Cameron] Hi, I'm Cameron Mckenzie,
@cameronmcnz on Twitter,
and I want to show you how you can create
a file uploader using HTML5 syntax in the browser
and a little PHP script on the Apache server.
As you can see, I've got my Apache web server
running right here,
it's just part of a Bitnami stack install of OS class,
but I assure you, it's just a regular Apache two server
with a good old htdoc folder right there.
Now, I wanna write some PHP code that's gonna upload
some files into that folder.
In fact, actually, I wanna upload it
into a folder named upload.
So I'll create that folder right there.
And in order to do that, well,
the first thing I need to do
is create a new PHP file that is going to basically
act as the HTML page which will be sent to a browser
and allow people to upload files through their browser,
I'm just going to call that uploader.php,
run that on uploader.php,
save that file in the htdocs folder
and just open that up.
And you know, there are really not going to be
too much PHP that goes on in here at all, actually,
you're just gonna start off with a basic doctype
and the basic body, even in this,
I've just got basic HTML here,
it's really not that much PHP, infact no PHP,
because the key to the uploader is really
this form object here.
And so if all of this is just standard HTML,
this is standard HTML too, but it is going
to target the upload.php file on the server.
And really, that's where the PHP upload logic
is going to go, it's gonna do that through a post
and this is pivotally the important
the encryption type, the encoding type,
has to be multipart form data, if it's not,
the file upload's not gonna work.
So make sure that if you want
to do file upload that you've specified this
in the form tag.
Furthermore, the input type has to be file,
notice the type is file, the name is file, the name file
is gonna be used to obtain the data on the server.
And then, of course, we've got a button there,
that's just for the submission.
But this is the key right here.
That's your form element right there
that specifies multipart as the upload type
and it invokes it through post,
and it calls the upload.php file.
If you've got that, well,
then it's time to dust off your PHP skills
and create that PHP file on the server.
And that's gonna be called upload.php.
Now this is gonna be a file that has
just a smidgen more PHP inside of it.
Again, I wanna make sure that upload.php is the action
and indeed it is, I'm gonna edit that file
and of course, I'm gonna start off with the basic HTML
and body tags and maybe terminate
with the body and HTML tags, and then all my PHP goodness
is gonna go right in here.
And I'm gonna start it off, and I'm gonna finish it as well,
and the part in the middle is really what's interesting,
the first thing I'm gonna do
is I'm gonna get that information that is sent
to the server from that form in that input field named file.
And the way I do it is this, I go I say,
I'm gonna hold up in a variable on the server here
named file name, I'm gonna get that file from the upload
along with the name of the file from the upload
and just hold it locally.
So this gives me a reference to the name of the file
that was uploaded, I then wanna save it
into my uploads folder.
So I then create a variable
that says the location that I wanna save this file to
is gonna be upload, that's the upload folder over there,
slash and then whatever the file name is
of the file coming in, so that gives me a reference
of the location where I wanna save it,
it gives me essentially a reference to the name
of the file that's coming in.
Then I use the move_uploaded_file function
and I move that file that's coming in,
copy that file that I've got in memory
essentially it's been uploaded to the server,
save it to that location
there that I've specified that's on my local server
and when that's done, I echo out,
Hey, file uploaded successfully,
maybe I'll put that in some paragraph tags there
just emphasize the fact that, yeah, it is happening
on the server and if it doesn't work properly,
I guess we'll put in bold
Hey, there was an error uploading the file,
but I don't think there will be
'cause all of this code looks golden to me.
I'm gonna save that file, make sure it's saved.
I'm gonna close it.
I am then going to bring up a file
with this PHP Uploader in it, there it is right there
local host/uploader.php, and I'm actually gonna double click
on that upload file just so
I can see what's going on here.
I'm gonna click Choose File.
There's a nice little file of my Viper there.
There's a friend, my friend Cali,
I think I'll upload her file, click on Upload,
it says file uploaded successfully.
That's the result of the PHP file.
And there's Kelly Jones smiling at us,
I think I might even pick a photo of that Viper there
and upload it as well.
It's the way I feel every time I pick up the keys.
That's uploaded, the Back button.
We'll take a look here, and maybe even a little picture
of that book there.
Anyways, that shows you that,
indeed, this is working properly and working successfully,
and that's all there is to writing a pure PHP-based upload.
I got a couple of the tutorials on how to deal
with jQuery, Ajax, JavaScript, Struts and HTML.
But if you want something really simple that works
on the Apache web server, you can't beat a simple PHP file.
And there you go.
That's how easy it is to create
a file uploader using HTML5 and PHP on the server.
If you found this interesting why don't you head over
to theserverside.com, I'm the editor-in-chief over there.
We've got lots of great tutorials on HTML, PHP, Java,
Enterprise Software Development, DevOps, you name it.
If you're interested in my personal antics,
you can follow me on twitter @cameronmcnz
and subscribe on YouTube.