Coder Perfect

How can I use HTML and PHP to pick and upload numerous files using HTTP POST?

Problem

I’ve done this before with a single file upload using an input type=”file”>. However, I’m having problems uploading multiple files at once.

For example, I’d like to select a group of photographs and upload them all at once to the server.

If at all possible, a single file input control would be ideal.

Does anyone know how to accomplish this?

Asked by stalepretzel

Solution #1

This is possible in HTML5. Example (PHP 5.4):

<!doctype html>
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <form method="post" enctype="multipart/form-data">
            <input type="file" name="my_file[]" multiple>
            <input type="submit" value="Upload">
        </form>
        <?php
            if (isset($_FILES['my_file'])) {
                $myFile = $_FILES['my_file'];
                $fileCount = count($myFile["name"]);

                for ($i = 0; $i < $fileCount; $i++) {
                    ?>
                        <p>File #<?= $i+1 ?>:</p>
                        <p>
                            Name: <?= $myFile["name"][$i] ?><br>
                            Temporary file: <?= $myFile["tmp_name"][$i] ?><br>
                            Type: <?= $myFile["type"][$i] ?><br>
                            Size: <?= $myFile["size"][$i] ?><br>
                            Error: <?= $myFile["error"][$i] ?><br>
                        </p>
                    <?php
                }
            }
        ?>
    </body>
</html>

After selecting two items in the file dialog in Chrome, this is what it looks like:

After hitting the “Upload” button, this is what it looks like.

This is simply a rough draft of a complete solution. For further information on how to handle file uploads properly and securely in PHP, see PHP Manual: Handling File Uploads.

Answered by Mark E. Haase

Solution #2

To generate a multiple file upload, you’ll need to perform a few things, which are actually quite simple. Java, Ajax, and Flash are not required. Create a standard file upload form by beginning with:

<form enctype="multipart/form-data" action="post_upload.php" method="POST">

Then the key to success;

multiple />input type=”file” name=”file[]” multiple />input type=”file” name=”file[]” multiple />input type=”file” name

Remember to use brackets! Try the following in post upload.php:

<?php print_r($_FILES['file']['tmp_name']); ?>

You’ll see that you obtain an array with tmp name data, which means you can access each file using the file ‘number’ example with a third pair of brackets:

$_FILES['file']['tmp_name'][0]

To count the number of files that were selected, use the php count() function. Best of luck, widdit!

Answered by Epoxys

Solution #3

In Firefox 5, the following is the complete solution:

<html>
<head>
</head>
<body>
 <form name="uploader" id="uploader" action="multifile.php" method="POST" enctype="multipart/form-data" >
  <input id="infile" name="infile[]" type="file" onBlur="submit();" multiple="true" ></input> 
 </form>

<?php
echo "No. files uploaded : ".count($_FILES['infile']['name'])."<br>"; 


$uploadDir = "images/";
for ($i = 0; $i < count($_FILES['infile']['name']); $i++) {

 echo "File names : ".$_FILES['infile']['name'][$i]."<br>";
 $ext = substr(strrchr($_FILES['infile']['name'][$i], "."), 1); 

 // generate a random new file name to avoid name conflict
 $fPath = md5(rand() * time()) . ".$ext";

 echo "File paths : ".$_FILES['infile']['tmp_name'][$i]."<br>";
 $result = move_uploaded_file($_FILES['infile']['tmp_name'][$i], $uploadDir . $fPath);

 if (strlen($ext) > 0){
  echo "Uploaded ". $fPath ." succefully. <br>";
 }
}
echo "Upload complete.<br>";
?>

</body>
</html>

Answered by Thaps

Solution #4

You’re mostly out of luck if you wish to select many files from the file selector window that appears when you select browse. You’ll need a Java applet or something similar for this (I think there is one that use a small flash file, I will update if I find it). Currently, a single file input allows only one file to be selected.

If you’re talking about many file inputs, there shouldn’t be much of a difference between using one and using multiple. Please post some code and I will do my best to assist you further.

Update: There is a flash-based approach for using a single ‘browse’ button. I’ve never used it myself, but I’ve heard a lot of good things about it. I believe it is your greatest chance.

http://swfupload.org/

Answered by MitMaro

Solution #5

To begin, create a form that looks like this:

<form method="post" enctype="multipart/form-data" >
   <input type="file" name="file[]" multiple id="file"/>
   <input type="submit" name="ok"  />
</form> 

That’s correct. Now paste this code into your form code or any website you choose.

<?php
if(isset($_POST['ok']))
   foreach ($_FILES['file']['name'] as $filename) {
    echo $filename.'<br/>';
}
?>

it’s easy… finish

Answered by pooya laryan

Post is based on https://stackoverflow.com/questions/1175347/how-can-i-select-and-upload-multiple-files-with-html-and-php-using-http-post