Tiffany B. Brown

a mish-mosh of stuff

Quick PHP Tip: Uploading multiple files in HTML5

One of the neat things about HTML5 is that it allows for multiple file uploads in one file upload field. Of course, you have to have a browser that supports such a feature. Currently Opera 11.10 does. So do Firefox 4, the latest version of Chrome, and Safari 5.0.4. (Internet Explorer 9 does not.)

Now what’s less clear is how to send data from multiple files to a server-side PHP script. Turns out, it’s quite easy. Treat it in the same way you’d treat any other array of options (radio buttons, for example) and include square ([]) brackets in the field name. See the code below for an example:

<!DOCTYPE html>
<html lang="en-us">
<head>
	<meta charset="UTF-8">
	<title>HTML5 Multiple File Upload</title>
	<link rel="stylesheet" href="s.css" media="screen">
	<style media="screen"></style>
</head>
<body>
	<form action="processor.php" method="post" enctype="multipart/form-data">
		<input type="file" value="" name="upload[]" multiple>
		<button type="submit">Upload!</button>
	</form>
<script></script>
</body>
</html>

In processor.php, all we’re going to do is print the $_FILES array so you can see what’s happening.

<pre>
<?php
     print_r( $_FILES );
?>
</pre>

Copy and paste this code and save it to your own server to see everything in action.

Related:

  • Tedd

    Hi:

    Is there really a need for the ?

    Cheers,

    tedd

  • Anonymous

    No, of course not. I just used an HTML template that I always use and didn’t clean out the empty tag.

  • http://twitter.com/Velehto Velipetteri Lehto

    This will not work with Opera (at least for what I know) since Opera puts multiple files into a $_POST array…

  • http://www.facebook.com/Voodoochilli Harry O’Connor

    So what happens if you use this on a browser that does not support it?

  • http://profiles.google.com/dgcodu Diego Gomes CODU

    That’s it? So simple? Really?
    Html5 is great!

  • http://twitter.com/JohnLiuti Jonathan Liuti

    I think plupload relies on this method (http://www.plupload.com) not certain though.

  • Sagish

    nice, but I think you should always link to a demo so we can test and feel it

  • http://twitter.com/SLCoding S&LCoding

    It works just fine in Opera 11.10 :)

  • Anonymous

    Yes, it works just fine in Opera 11.10. Where do you think I tested it first :-) ?

    I’m not 100% sure about Opera 10.x support for the multiple attribute, but this does indeed work in Opera 11. The $_POST vs. $_FILES array is something that happens on the server. But from the form, it all goes to the script as a POST request.

  • Anonymous

    You will only be able to select one file for uploading, and it works like any other file upload field.

  • Anonymous

    HTML5 IS great, but this is no different than using multiple file upload fields.

  • Anonymous

    I don’t want to upload strange files to my server :-) .

  • http://twitter.com/Velehto Velipetteri Lehto

    I tried this a couple a weeks ago with Opera 11.01 and files was sent via $_POST (firefox and chrome sent in $_FILES-array). Yeah, I noticed later that you work for Opera so I was a little embarrassed :)

  • Casey

    I know how to make a single file php upload script but I’m struggling with this multi thing. Can you make a downloadable example? pleeeease :-)

  • Anonymous

    You can download it here: http://tiffanybbrown.s3.amazonaws.com/downloads/multiple_file_upload_demo.zip

    Handling multiple files is much the same as handling a single file. You just have a multi-dimensional array. Keep in mind that if you wanted to upload multiple files in a non-HTML5 browser, you’d just use more than one instance of in your code. The multiple keyword is a similar concept.

    Now once it’s uploaded, a single file $_FILES array looks like this:

    Array
    (
    [upload] => Array
    (
    [name] => bitch_i_am_fabulous.png
    [type] => image/png
    [tmp_name] => /temp/phpRinctC
    [error] => 0
    [size] => 163453
    )

    )

    And a multiple file $_FILES array looks like this:

    Array
    (
    [upload] => Array
    (
    [name] => Array
    (
    [0] => file1.png
    [1] => file2.txt
    )

    [type] => Array
    (
    [0] => image/png
    [1] => text/plain
    )

    [tmp_name] => Array
    (
    [0] => /temp/phpRinctC
    [1] => /temp/phpwksTX4
    )

    [error] => Array
    (
    [0] => 0
    [1] => 0
    )

    [size] => Array
    (
    [0] => 163453
    [1] => 258
    )

    )

    )

    You move from a one-dimensional to a two-dimensional array. Rather than file data by file, PHP groups it by the name of the key.

  • Casey

    Woo! you rock!

  • Fayana Raihana

    this script very useful for me

  • IB

    thumbs upppp

  • http://profiles.google.com/dreamerbl asd erg

    Don’t we all just hate every iteration of Internet Explorer? I mean – c’mon!

  • Guest

    Thank you very much for this.
    Saved me a ton of time, it’s way easier to implement than all those stupid flash/jquery plugins with 400 include files

  • chams

    thank you so much.. It works like magic :)

  • Guest

    If you don’t do move_uploaded_file in your PHP script, it won’t actually save the file, it will sit in a temp folder for a little while and eventually get erased automatically. If you’re concerned about storing files even temporarily, you could change the PHP directive upload_tmp_dir to /dev/null and not even a single byte will be saved, even temporarily. Just saying. ;)

  • Anonymous

    I provided the script. I think that’s enough.

  • Sakthi

    it is not working for me either in chrome or in firefox. can any one help me