Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

017 Uploading files with forms using PHP


View Source

with Ray Villalobos

Video: 017 Uploading files with forms using PHP

017 Uploading files with forms using PHP provides you with in-depth training on Web. Taught by Ray Villalobos as part of the View Source
please wait ...
017 Uploading files with forms using PHP
Video Duration: 9m 12s2h 10m Intermediate Jan 20, 2012 Updated May 25, 2012

Viewers: in countries Watching now:

017 Uploading files with forms using PHP provides you with in-depth training on Web. Taught by Ray Villalobos as part of the View Source

View Course Description

The View Source weekly series offers 10-minute projects on intermediate and advanced web design topics, covering technologies such as HTML, PHP, jQuery, and CSS, as well as content management solutions like WordPress and integration with Twitter, YouTube, and more. Each movie in the course is self-contained and shows how to accomplish an interesting effect and/or technique. Example projects include creating datepickers and custom photo galleries, and mapping and geotagging with Google Maps.

Topics include:
  • Creating a custom URL in WordPress
  • Adding breadcrumb links to sites
  • Creating a toggle button with jQuery
  • Adding Twitter feeds to a site
  • Adding PayPal buttons to pages
  • Uploading photos to your web site
  • Embedding videos for different browsers and devices
  • Parsing and placing a YouTube video feed
Ray Villalobos

017 Uploading files with forms using PHP

Hello! This is Ray Villalobos and welcome to View Source! In this episode, we're going to build an image uploader using PHP. So if you want to crowdsource your audience and let people upload files to your web site, it's time to View Source. Let's talk a little bit about our setup. We're going to be using PHP which is a server-side technology, which means that you have to work on a server that parses PHP files. So I'm working off of a live server this time, not on my local machine. In our live server, we have a number of files, some of them are pretty mundane. We have an images folder with a couple of normal images plus an index.php file.

Whenever you're working with PHP, you want to use the .php extension. We've also loaded a copy of jQuery, as well as a style sheet, and we have a couple of empty files right now, the showuploads.php and the upload.php file which we'll be constructing in this movie. We also have an uploads folder that will hold the photos that people upload to our site. So taking a look at the index.php file, I'm going to open it up in my Text Editor. I'm going to click it and click on Edit, I'm using Cyberduck here.

One of the things that's unique about the form is this new attribute called enctype. So enctype is the encoding type for this particular form. Normally, forms get sent through the web as text files. When somebody is uploading a normal file, we don't want to transcode the data, so we have to tell the form to use this particular enctype, multipart/form-data. Also the method for this form happens to be POST. When you're using very long document like files, you want to make sure that you use the POST method because the GET method can only hold so many characters.

After that we have a label as well as an input type, and this input type is different than normal, is of type file. The input type file will give you a dialog box where you can choose a file from your own computer. Other than that, this is a plain form, so the next thing we need to do is build our file uploader. So if you notice, we're sending this form to a script called upload.php, so we'll need to build that next. To do that, I'm going to go back into Cyberduck and click on upload.php, and open up that file. This is just an empty file right now, so we're going to grab the code from our codesnippets file here, and copy it, and paste it in here and let me go through what this code does.

When somebody submits the form, the information that gets passed along to this document is the file data that gets passed along by the browser. From the file data, we can grab a few variables and what we're doing here is we're grabbing a temporary name because when a file is uploaded from a form element, it gets placed in a temporary location and it gets placed in this array that gives us the information about the form. So a couple of things we can grab from here is the temporary name that the file is going to be placed under, as well as the name of the file that was uploaded. So if we load this file called burrito.jpg, that would be the name of the file.

In addition to that, I'm going to be creating a special variable called saveddate that stores a version of today's date with the time, so that whenever somebody uploads a photo, say the burrito.jpg file and somebody comes later on and uploads the same photo, those two photos will have different names. They'll have text for today's date, plus the name burrito.jpg. That way multiple files can be uploaded to the site without a problem. Now we need to come up with a new file name since we are going to be using a different name than what the file was originally named.

We also are using a subfolder to store these files, so we come up with a new file name of uploads/, then the name of the file was saved, as well as the upload file name, which is just a regular name that people use when they submitted the form. Finally, we're going to use the move_ uploaded_file command and send it to temporary name of the file as well as the newfilename. And if that function executes properly, then it's going to print out that the file has been uploaded. So let me save this and come back to our form.

So I'm going to hit Choose File right here to bring up my File Manager, and on the desktop find my burrito picture, and I'm going to hit Choose, and then hit the Submit button, and you could see that it says File Uploaded, this means that the file has uploaded properly and is now on our server. If I go back into my FTP program and I open up the uploads folder, I may have to refresh, but I can see the file is there and notice that it added the date as well as a timestamp to our burrito.jpg name, which is great.

So our uploader is working pretty well, that wasn't even a lot of difficult code. There's no way of knowing on our site that a file has been uploaded. The only way that we can find out right now is by checking through an FTP program on our server. So it would be nice to have some sort of feedback to let us know that the file has uploaded properly. So what I'm going to do is I'm going to come back to this page and I want to add a copy of the photo on this page after it has been uploaded. So to do that, I'm going to go back into my codesnippets, and I'm going to add a div to my page so that I can insert the images that have been uploaded.

So I'm going to copy this, and go back into my index file. Right now, we're in the upload.php, I'm done with that, so I'm going to close that out and switch back over to my index.php, edit that, and I'm going to add that after the form element. I'll just add a placeholder so that we can put the photo uploads in there. So the next thing I need to do is actually write a script that will show us the photos that are in that folder. If you remember back from week ten, we created a script that did exactly that.

The script allows you to build HTML from a folder's content. So I have a slightly modified version of that script in our snippets file, and it looks like this. This is the same script as the listing files with PHP movie we've built earlier on, so I'm just going to copy it and open up our showuploads.php page and paste that code in there. The only thing that we have changed here is since we are calling this folder uploads, I have changed the name of which directory is open, and what the image tags are supposed to be.

Other than that, this is exactly the same code. So I'm going to save that, and I'm going to close out of it. And if I go to my web site and I type in showuploads.php, I can see that the burrito photo that I loaded is already showing up in there. It would be nice to pull that into my original page, so I'm going to do that with a piece of jQuery. That means I need to load the jQuery library as well as write a small script that is going to show the uploads on this original page. So I'm going to grab the script right here.

This is also similar to another lesson that I showed you earlier on how to load content from one page to another. So I'm going to go into my index.php again, open that up, and I'm going to add that script at the bottom, right before the closing body tag. This script loads a copy of jQuery AJAX from Google's CDN, as well as a local copy just in case I am working offline. And then it has simply a document ready function that means that whenever the DOM loads, execute this function, and all it's doing is it's grabbing the showuploads page and then putting the contents on that page onto this page.

It's going to hide it and fade it in at 500 milliseconds, so there is a little bit of a fade-in. But other than that, it's pretty simple code. So I'm going to save that, and I'm going to go back into this page and just reload, and now you can see that this page loads, but then in addition, it loads the content from the showuploads.php which just simply reads the directory where all the photos are uploaded and shows us what's in there. If I were to load up another photo right now, and I would hit the Submit button, I still get taken to this other page that says File Uploaded.

If I want to see my photo, I would have to click the back button and refresh this page and see that the new photo is there. So I need to find a way of returning to this page once the photo has been uploaded by our uploader. So I'm going to do that with another piece of code, so I'm going to modify my uploader slightly by adding a location of where to go whenever it's done processing. I'm going to copy this version of the code, this version of the code is very similar to the last version. So I'm going to click on that upload file and hit Edit, and just paste the new version.

You can see that the only difference is that instead of printing out a file uploaded message, we are using a header method to tell the web site that the location of this page should be the other page. So what this will do is it will load up the index file which has the form element as well as a list of all of our photos. So I'm going to save that, go back into this form, and I'm going to hit Choose File to choose another photo. The one that I haven't picked is the spoon.jpg, so I'll choose that, I'll hit the Submit button, it'll submit the form.

Go to the form processor, which tells it after the photo has uploaded to come back to this page. This page shows the updated images and we can see immediately some feedback from what we have done. So if you scroll down, you can see the other photos are still there and that's a great image uploader. Sharing is part of the online experience, so don't forget that sometimes for a web site it's better to receive than to give. And tune back next time for another episode of View Source.

There are currently no FAQs about View Source.

Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.

Mark all as unwatched Cancel


You have completed View Source.

Return to your organization's learning portal to continue training, or close this page.


Upgrade to View Courses Offline


With our new Desktop App, Annual Premium Members can download courses for Internet-free viewing.

Upgrade Now

After upgrading, download Desktop App Here.

Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Start your FREE 10-day trial

Begin learning software, business, and creative skills—anytime,
anywhere—with video instruction from recognized industry experts. provides
Unlimited access to over 4,000 courses—more than 100,000 video tutorials
Expert-led instruction
On-the-go learning. Watch from your computer, tablet, or mobile device. Switch back and forth as you choose.
Start Your FREE Trial Now

A trusted source for knowledge.


We provide training to more than 4 million people, and our members tell us that helps them stay ahead of software updates, pick up brand-new skills, switch careers, land promotions, and explore new hobbies. What can we help you do?

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from

Sign up and receive emails about and our online training library:

Here’s our privacy policy with more details about how we handle your information.

submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.