Let’s start with the basics of setting up the form, and handling the uploaded file. Then we can tackle some of the security issues.

For the upload to work, you must add enctype="multipart/form-data" to your form tag. This signals that the POST request will contain upload data as well as the form field values.

Among fields you’ll need are a hidden field named MAX_FILE_SIZE, which tells the client not to accept a file over a certain number of bytes (300000, or 300 kilobytes, in this example) as well as the file upload field itself.

<form method="post" enctype="multipart/form-data">
	<input type="hidden" name="MAX_FILE_SIZE" value="300000" />
	<input type="file" id="myupload" name="myupload" />
	<input type="submit" name="submit" value="Submit" />
</form>

This form is going to submit to itself (that is, the PHP file that outputs the form is also the script that processes the data) so it is unnecessary to specify an action value for the form.

The code that processes the upload is actually just a couple lines. The rest is error-checking.

if ($_POST['submit']) { //If the form was submitted, commence doing stuff

	if ($_FILES['myupload']['error'] != 0) {
		//The upload failed for some reason, so output a human-friendly error message for the corresponding error number.
		$errcode = array(
			"No errors",
			"File exceeded the PHP INI upload_max_filesize value.",
			"File exceeded the maximum allowed size.",
			"Partial upload.",
			"No file uploaded.",
			"UPLOAD_ERR_NO_TMP_DIR",
			"UPLOAD_ERR_CANT_WRITE",
			"UPLOAD_ERR_EXTENSION",
			"UPLOAD_ERR_EMPTY"
		);
		$error = $errcode[$_FILES['myupload']['error']];
		echo "Error: " . $error;
	}
	else {
		//No errors, so we can move the uploaded file to our uploads directory
		move_uploaded_file($_FILES['myupload']['tmp_name'], "./uploads/".$_FILES['myupload']['name']);
		unset($_FILES);
	}

}

The most important part here is the move_uploaded_file() function, which does what it says on the box. The first argument is the temporary path of the uploaded file (which $_FILES[‘myupload’][‘tmp_name’] contains) and the second is the destination. In the example, I set it to use the name of the uploaded file (you may want to rename it) and put it in ./uploads.

That should be enough for a basic file uploader, but it does absolutely nothing to check that the uploaded data is what you’re expecting. It could be exploited terribly easily.

To combat abuse, you should add some checks. A couple of good things to look for are:

• The MIME type. Inspect the uploaded file and make sure it’s an image file (or whatever kind of document you’re wanting).
• The existence of “.php” in the filename.

It’s also a good idea for you to set the permissions of your uploads folder to disallow execution of shell scripts.

Checking the MIME type of an image is surprisingly easy, since there’s a handy function built-in to retrieve that information from a valid image file.

$imgdata = getimagesize($_FILES['myupload']['tmp_name']);
if (!in_array($imgdata['mime'], array( 'image/gif', 'image/png', 'image/jpeg', 'image/pjpeg' ))) {
	//This isn't an image file. Better display an error and NOT move the image to its permanent spot. The temp file will be deleted automatically.
}

Preventing PHP files from being uploaded, fortunately, doesn’t require a scary Regular Expression. You can just use strpos() to check for the presence of a substring.

if (strpos(strtolower($_FILES['ad_img']['name']), '.php') !== false) {
	//Stop right there. Why does an image file have '.php' in it?
}

That’s enough to discourage your average script kiddie, though someone with real skill might be able to find a way to get around such checks. If anybody has something to add, I’d like to hear it.

The getimagesize() function returns an array containing the width and height and the content type.

//Basic usage
$info = getimagesize($filename);
$width = $info[0];
$height = $info[1];
$format = $info['mime'];

//Alternate one-liner suggested by the manual
list($width, $height, $type, $attr) = getimagesize($filename);

This function is really useful for handling image uploads, since you can’t necessarily trust the MIME type that $_FILES reports. The function actually inspects the file to ascertain the type, rather than relying on what the client reports. Also, you may want to make sure that the uploaded images match the dimensions you have in mind.

Here’s how I like to handle it:

$imgdata = getimagesize($_FILES['image_upload']['tmp_name']);

if ($imgdata[0] > 640 || $imgdata[1] > 480) {
	$errors[] = "Your image is too big!";
}

if (!in_array($imgdata['mime'], array( 'image/gif', 'image/png', 'image/jpeg', 'image/pjpeg' ))) {
	$errors[] = "Your file should be a PNG, JPG or GIF!";
}

There’s not much to be done for the latter, but there is a handy tool that makes finding the coordinates painless. Sprite Cow intelligently draws a box around an image you select in your sprite sheet (after you load the sprite, of course) and writes the CSS for it. You can’t get any simpler than that.

I bet the developers could make some good money by making a Mac version and putting it up for sale in the App Store.

A QR code can contain any sort of textual information, which will be decoded by a QR reader. A web address, a simple message, a phone number, etc.. A good QR reader should figure out what the decrypted data is and act upon it accordingly. If it’s a web address, it will display the web page. If it’s a phone number, it should display the number and offer to call it.

Users of the iPhone or fourth-generation iPod Touch can use a free app like QR Reader to scan QR codes.

What can you use a QR code for? There are plenty of possible applications. Magazines could print QR codes that let you quickly jump to a web page. (Anyone remember the CueCat?) Advertisements could have QR codes that offer more information. You could put a QR on your business card. Want to move a web page you’re reading from your computer to your phone? Create a quick QR matrix and scan it right off the screen!

Now for the fun part… How do you make your own QR codes?

Google has a nifty API for dynamically generating charts. A simple (if messy-lookig) URL request will instantly generate an image containing a pie chart or a line graph. While QR codes aren’t exactly charts, the service has an option to generate them all the same. All you have to do is use a URL like this:

http://chart.apis.google.com/chart?cht=qr&chs=500x500&choe=UTF-8&chld=H&chl=http://www.webmaster-source.com

If you visit the above URL in your web browser, you should see a huge 500×500 pixel QR code that will take you to Webmaster-Source if you scan it. You could easily copy and save the image, print it, or embed it in a web page by using the URL in an <img> tag.

The key/value parameters in the URL are as follows.

• cht=qr — This tells the API that we’re creating a QR code instead of a pie chart or whatever.
• chs=500×500 — The size of the chart, in pixels. (I imagine “chs” stands for “CHart Size.”) 500×500 seems to be the maximum size.
• choe=UTF-8 — The content encoding. You should probably leave this as-is.
• chld=H — This seems to set the type of QR code. If you remove it, a different pattern will be used. I would recommend keeping the default unless you know what you’re doing.
• chl=[…] — The data you want to create a QR code for, such as a web address. If it is a URL, just paste it verbatim after the equality sign.

The beauty of the API is it’s simplicity. If you know you’re building some sort of web app, you could easily use your language of choice to mash your data up into a URL request and spit out an image tag with a QR code. Google already does this with their Goo.gl URL shortener. If you look at one of their URL info pages, it displays a small QR code and a link to a larger one. (Actually, adding “.qr” to the end of any Goo.gl URL will display the QR code.) It’s a very easy way to get a quick QR.

There are several services that can generate thumbnails like that, but most of them place watermarks on the images or place limits on how many API calls you can make in a month. (Amazon used to offer a paid service, but it was discontinued a year or two ago.)

To my surprise, when I was submitting an article to WPVote recently, I found that the thumbnails were served up by a subdomain of WordPress.com. I thought something along the lines of “Eh? I didn’t know they offered a screenshot service…” and continued about my business.

A couple days later, I spotted Ben’s blog post in my feed reader. In it he explained how he discovered a dynamic URL that Automattic uses, in places like the WordPress.org commercial themes page, to display thumbnails. He posted an email to Matt Mullenweg about it and got this as a response:

You can use it and link to it, but it’s not official. It’s not worth the effort to try to make it into a business – we have to support it anyway for our own apps.

Sounds good to me. Obviously it wouldn’t be nice to use it for something huge and high-traffic, but it seems like they don’t object to us smaller WordPress fanatics making use of it.

http://s.wordpress.com/mshots/v1/http%3A%2F%2Fprothemedesign.com%2F?w=250

There’s now a WordPress plugin that makes it easy to use the thumbnails in blog posts, with a shortcode, or elsewhere with a template tag.

Installation is quick and painless, a simple matter of uploading the files and running the 5-step installation wizard. It checks to make sure the prerequisites (PHP 5.2, GD, SimpleXML) are met and then prompts for your MySQL credentials. Once that’s taken care of, it asks you for a username and password for the admin account, then lets you optionally set up a watermark that will be added to your images. The final step lets you batch-add a folder full of images, though you can put that off until later.

Managing your images with PowerGallery is a breeze. You can simply drag and drop the thumbnails to reorder them, and it only takes a couple of clicks to rotate them if need be. Editing metadata is intuitive: a simple matter of selecting a thumbnail and tweaking the text fields to the right.

You have two options when it comes to uploading images: either do one at a time, or FTP several to a server directory and import them all at once.

There are several layout options for your galleries. You can have a grid of thumbnails that open the full-size image in a Lightbox overlay when clicked, a thumbnail grid with the full-size image displayed above, or you can have either configuration, but with a “ribbon” of thumbnails instead of a grid. The options are available in both light and dark color schemes.

Galleries can be linked to directly, or you can get snippets of PHP code to embed them directly into an existing page.

The finished product looks good, and functions like you would expect any image gallery to. It would work well for a portfolio, product photos, or whatever your needs are.

PowerGallery is a great software package, and its only real drawback is the price. It costs $99.99 for an unlimited-site license, though it’s discounted to $69.99 until the end of December. I think the normal asking price is a little steep for many individuals, though businesses should have no issue, but PowerGallery is a great option for those who can afford it.

To make use of the script, once installed, you simply put the URL of the TimThumb script in an image tag, and pass arguments for the original image and the scaling options.

<img src="/thumbnails/timthumb.php?src=
/images/an_image.jpg&w=128&h=128&zc=1" alt="">

This would be perfect for generating thumbnails for blog posts, which is, interestingly enough, what the script was originally developed for.

Basically it uses a one-pixel graphic and a bit of CSS to style a nested list element, with an end result that looks something like this:

That’s a semantically-correct <ul> element styled with one image and no additional markup. It’s so simple I wish I had thought of it…

The effect looks good, and it’s search engine-friendly. CSS-Tricks has a tutorial on how to create a similar implementation with CSS absolute positioning.

Basically you create a relatively-positioned DIV and put the image and H2 elements inside. Then you absolutely position the two elements, and add a solid or semi-transparent background behind the heading text.

Text Blocks Over Image [CSS-Tricks]