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> … Read more

Changing upload_max_filesize on PHP

You can’t use shorthand notation to set configuration values outside of PHP.ini. I assume it’s falling back to 2MB as the compiled default when confronted with a bad value. On the other hand, I don’t think upload_max_filesize could be set using ini_set(). The “official” list states that it is PHP_INI_PERDIR .

Security threats with uploads

First of all, realize that uploading a file means that the user is giving you a lot of data in various formats, and that the user has full control over that data. That’s even a concern for a normal form text field, file uploads are the same and a lot more. The first rule is: … Read more

Uploading multiple files using formData()

You have to get the files length to append in JS and then send it via AJAX request as below //JavaScript var ins = document.getElementById(‘fileToUpload’).files.length; for (var x = 0; x < ins; x++) { fd.append(“fileToUpload[]”, document.getElementById(‘fileToUpload’).files[x]); } //PHP $count = count($_FILES[‘fileToUpload’][‘name’]); for ($i = 0; $i < $count; $i++) { echo ‘Name: ‘.$_FILES[‘fileToUpload’][‘name’][$i].'<br/>’; }

Upload Progress Bar in PHP

This is by far (after hours of googling and trying scripts) the simplest to set up and nicest uploader I’ve found https://github.com/FineUploader/fine-uploader It doesn’t require APC or any other external PHP libraries, I can get file progress feedback on a shared host, and it claims to support html5 drag and drop (personally untested) and multiple … Read more

Show an image preview before upload

Here’s a quick example that makes use of the URL.createObjectURL to render a thumbnail by setting the src attribute of an image tag to a object URL: The html code: <input accept=”image/*” type=”file” id=”files” /> <img id=”image” /> The JavaScript code: document.getElementById(‘files’).onchange = function () { var src = URL.createObjectURL(this.files[0]) document.getElementById(‘image’).src = src } The … Read more