Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Ajax and JavaScript

AJAX-Like File Uploads with jQuery

  • Print
  • + Share This
  • 💬 Discuss
Web developer and designer Jay Blanchard shows you how to create AJAX-like file uploads with jQuery and a very simple, and very small, script that can be modified to use in any website or web application project.

“Due to security restrictions you will not be able…”

I hate when a sentence begins with those words, but in your everyday work as a web developer, you are likely to hear them spoken again and again. When AJAX started becoming popular, web developers rejoiced because they could build rich interactions with servers. These interactions could occur without reloading web pages-right up until they wanted to build a file upload widget and ran head long into the sentence above.

It makes sense that these restrictions are in place. It would be very easy for web developers to exploit JavaScript hacks to invade and abuse file systems on both user systems and servers. So how can you build a file upload widget that appears to act just as an AJAX interaction would?

You use an HTML iframe element!

Here’s what you will need:

  • The jQuery library: http://jquery.com
  • A text editor
  • A local web server (for testing)

    For Mac, you can use MAMP.

    For PC, you can use XAMPP.

  • Downloadable code (jquery_file_upload.zip)

Let’s Get to Work

For this tutorial, you will create three files: the HTML file to display the upload form, a PHP (please feel free to use any scripting language that you are comfortable with) script to handle the actual file upload, and a jQuery script to perform all of the necessary actions to make the upload appear to happen as if it were an AJAX process.

Figure 1 illustrates the directory layout for our project. Make sure to create a folder for the uploads in the same directory where the files created for this project will be stored. Save the jQuery library file to this folder as well.

Figure 1

Figure 1 Directory layout for this project.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus