How to Select Multiple Files for Upload

How to select multiple files with input type=file?

New answer:

In HTML5 you can add the multiple attribute to select more than 1 file.

<input type="file" name="filefield" multiple="multiple">

Old answer:

You can only select 1 file per <input type="file" />. If you want to
send multiple files you will have to use multiple input tags or use
Flash or Silverlight.

How to select multiple files for upload?

This depends on the browser. Newer versions of firefox and chrome support this because they started to implement HTML5 specification. This is the syntax:

<input type="file" multiple=""/>

Firefox >= 3.6, Chrome >= 2, Safari >= 4 support multiple file input.

For older browsers the only good solutions are flash or javascript plugins.
Here is a good resource for jquery uploaders ( some support multiple files ): http://creativefan.com/10-ajax-jquery-file-uploaders/

Select multiple files individually and upload with PHP

I had same problem some time ago, but I could figure out workaround and here is what I do. Everytime when user click and select files I add css class to file input and make it hidden, and then I append new file input with same properties to the form. This works good and does not requires changes in backend, just slight changes on frontend. Hope this helps you.

Multiple files select and upload

You can use the multiple attribute for that, like this:

<input type="file" multiple />

To select multiple files you need to press the Ctrl key and click on the files you want to add.

How can I select and upload multiple files with HTML and PHP, using HTTP POST?

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>

Here's what it looks like in Chrome after selecting 2 items in the file dialog:

chrome multiple file select

And here's what it looks like after clicking the "Upload" button.

submitting multiple files to PHP

This is just a sketch of a fully working answer. See PHP Manual: Handling file uploads for more information on proper, secure handling of file uploads in PHP.

Selecting Multiple Files for Upload in Web Page

I strongly recommend reading this article by Rick Strahl

short answer for HTML5

<form method="post" enctype="multipart/form-data">                
<label>Upload Images:</label>
<input type="file" multiple="multiple" name="File1" id="File1" accept="image/*" />
<hr />
<input type="submit" id="btnUpload" value="Upload Images" />
</form>


Related Topics



Leave a reply



Submit