Tiffany B. Brown

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:

29 Responses to “Quick PHP Tip: Uploading multiple files in HTML5”

  1. Tedd says:

    Hi:

    Is there really a need for the ?

    Cheers,

    tedd

  2. Anonymous says:

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

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

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

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

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

  7. Sagish says:

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

  8. S&LCoding says:

    It works just fine in Opera 11.10 :)

  9. Anonymous says:

    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.

  10. Anonymous says:

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

  11. Anonymous says:

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

  12. Anonymous says:

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

  13. 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 :)

  14. Casey says:

    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 :-)

  15. Anonymous says:

    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.

  16. Casey says:

    Woo! you rock!

  17. Fayana Raihana says:

    this script very useful for me

  18. IB says:

    thumbs upppp

  19. asd erg says:

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

  20. Guest says:

    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

  21. chams says:

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

  22. Guest says:

    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. ;)

  23. Anonymous says:

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

  24. Sakthi says:

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

  25. Faizan says:

    Can I limit the amount of files ? Like a user can only select only five files?

  26. robb says:

    does someone know how i can access the names of the files a they are selected so that i can show them all in a box, and perhaps let the user modify this string before pressing on the upload button. this could enhance this already welcome html5 feature.

  27. Shamsuddin says:

    i want to store all the file in uploads/ folder and rename all the files in ascending numeric values. how to do this please send me the solution @ shamsuddin.php@gmail.com.

    Thanks in advance.

  28. Me says:

    I dont see how this thing is elpful at all.. you only posted the html5 part which is the easy part.. where’s the prossessing and storing of the files array? that’s the important part ,,,, and i belive most of  your visitors have been asking about that but you keep ignoring them?? … anyways will post a link to storing demo when i finish it…
    Regards

  29. Me says:

    $error_message[0] = “Unknown problem with upload.”;
    $error_message[1] = “Uploaded file too large (load_max_filesize).”;
    $error_message[2] = “Uploaded file too large (MAX_FILE_SIZE).”;
    $error_message[3] = “File was only partially uploaded.”;
    $error_message[4] = “Choose a file to upload.”;

    $upload_dir  = ‘./tmp/’;
    $num_files = count($_FILES['upload']['name']);

    for ($i=0; $i < $num_files; $i++) {
        $upload_file = $upload_dir . basename($_FILES['upload']['name'][$i]);

        if (!preg_match("/(gif|jpg|jpeg|png)$/",$_FILES['upload']['name'][$i])) {
            print "I asked for an image…";
        } else {
            if (@is_uploaded_file($_FILES['upload']['tmp_name'][$i])) {
                if (@move_uploaded_file($_FILES['upload']['tmp_name'][$i],
                    $upload_file)) {
                    /* Great success… */
                    echo "horray";
                } else {
                    print $error_message[$_FILES['upload']['error'][$i]];
                }
            } else {
                print $error_message[$_FILES['upload']['error'][$i]];
            }   
        }
    }