hey i'm cameron mckenzie at cameron mcnz on twitter and i wanted to talk to you about writing
some php code to create a file uploader and do it with ajax now i'm going to show you how to do this
using an html form of course i mean that's how you've got to upload the file from the browser
to the server but on that client i'm not going to be using jquery or dojo or anything like that
it's going to be pure javascript it's going to run in any browser and it's not going to be dependent
on one of those huge libraries from there i'm just going to have that simple html form and
i'm going to have it call a php based resource on my apache server it's going to handle that file
it's going to create a new file in a local folder save that file permanently and then send an ajax
based response to the client saying hey that upload went swimmingly before i kick this off i
just wanted to show you my setup here i've got an apache web server it was part of a bitnami stack
install but it's just a pure normal apache web server with that htdocs folder in it and in that
htdocs folder that's where i'm going to create my html file that's got my javascript and html
file uploader in it i'll call it.uploader.html that's the name that i'm going to give the file
and that's going to run in the browser and provide an html5 file uploader to the user and it will
also send the request to the server using ajax and pure javascript no jquery in this example now
when i kick things off the first thing you want to do with any html5 file is just start it off
nicely make sure it's well formed get your html tags your body tags even your title tag in there
that all looks handsome now that's really not that interesting what's going to be interesting
is an input field that is of type file if you put this into your html pages say
input id equals file type id equals file upload type equals file that's what's key
all of a sudden you'll get a file uploader in there a little button allow you to select files on
your file system and it will subsequently help you upload them to the server so that's the cool html5
input file selector that they have now of course if you want to actually submit something to the
server you're going to need a button and that will put the button in there and you know
i could actually open up a browser window and type that url in there localhost uploader.html and you
actually see the choose file and upload option here that maps to the choose file uploader right
there and the upload button right here but yeah that's actually how it would look so that looks
pretty good but it's fairly non-functional we want that file to be saved to the server
as soon as somebody clicks that upload button so i'm going to implement a save
file method that happens on this on click that means having a little bit of a script tag in here
and that script tag is just going to respond asynchronously to that
save file command so i'll open up the script here i'm going to end the script here
and then in the middle i'm going to have this save file function and this is what's getting called
there and i should probably close that bracket and then inside here what am i going to do i'm
first going to declare an instance of a form so create a new form data object to represent
all of this form data that's coming in the file i'm going to have to append now notice that the
name of the field is file upload so i'm going to say form data dot append so append to my form data
that file and i'm only going to have one file in this example so that'll be file at zero
from there i am going to asynchronously call
on the upload.php file which i'm about to create now in order to upload a file you need a resource
on the server to capture that file and save it and that's going to be the upload php file it's not
going to be too intimidating but i need to create that and i'll create that in a moment i'm going to
call that through a post method i'm going to pass all my form data and that form data is going to
include appended to it all of the information about that file well not just the information
about the file but the file all this is going to run in the client it's going to run asynchronously
when it all succeeds i'm just going to send a little message out here you can do as much
ajax as you want update divs i'm just going to do a little alert messages the file has been uploaded
successfully and that will conclude my javascript now as i said this is going to be pure javascript
it's not going to be any jquery it's not going to be any dojo it's just pure javascript
asynchronously forcing that button to upload a file to the server when it's clicked so i'm
going to save that now this is all going to get uploaded to a file named upload so i'm
going to create a new for or folder named uploads so i'm going to create a new folder
called upload and then i need a php resource on this server i'm going to call it upload.php
and this is what is going to capture the incoming file if you go back to this piece of
code right here you'll notice that it's calling on upload.php to handle the request that's this
file here i need to code it so it's going to be a php file so you got to put in the standard php
script in here let me see if i can kick it off start off with some php and then end that with the
terminating php tag there and then what are we going to do inside here well first of all
i am going to get the name of the file that was uploaded so i create a variable the hold the file
name it grabs me the file name here based on what was being uploaded i'm going to save that file
to this upload folder using that file name so i create a variable representing that location there
in the file name i call it the upload folder slash the name of the file that was declared right here
and then i use some move uploaded file php razzle dazzle to take the file that's been uploaded
that's the file there and save it to this location that i've just specified
and if everything's successful i just echo success otherwise echo failure i could handle
that through ajax but on the client side i'm just going to upload and say hey everything was good
but that's the php side of it not what saves the file to that upload folder you see upload
right there now i'm going to open that upload folder and i'm going to open my
pure javascript file uploader here that's the uploader.html file i'm going to choose a file i'm
going to take a look at my friend cali there she's always taken selfies i'll click this upload button
and magically it gets uploaded to the server i can take a look at the viper there upload a
photo of the viper i could even go in here and take a look at my book pickering of springfield
and upload that file as well i could do all of this i could do this all day long just
uploading files and i could feel real good about myself knowing that this is really
nothing more than just php on the apache web server and pure javascript on the client and
there you go that's how easy it is to bring ajax together with php with a little bit of html5 and
javascript sprinkled in there for good measure now if you enjoyed that tutorial why don't you head
over to the serverside.com i'm the editor-in-chief over there we've got lots of great tutorials on
java javascript php html devops automation all of those crazy things that makes up the world of
enterprise software development in 2020 if you're interested in my personal antics you can always
follow me on twitter at cameronmcnz and as i always suggest why don't you subscribe on youtube