Embedded Files
We made two examples that rely on the serial approach:
one that uses only a file selector,
one that uses drag and drop.
We could have merged file selector + drag and drop, as we did in examples earlier in the course, but the code would have been longer and more difficult to follow.
Example #1: auto-loading of the files, regular form submission, benefits of the HTML5 form validation system
Example #1: auto-loading of the files, regular form submission, benefits of the HTML5 form validation system
Example using a file selector (<input type="file">):
Try the online example at JSBin (this one does not have the PHP code running, but works anyway, even if the files are not uploaded - it "fakes the upload"). Look at the online example for the code and the following explanations.
In this example, the "send" button is disabled and becomes enabled as soon as all the files are completely uploaded. Also, note that the form is saved as the user types, by using localStorage. Accordingly, it can be restored on page reload, as in the example from the localStorage topic of the HTML5 Part 1 course.
Note that the full working source code of this example corresponds to "example 1" in the zip archive that contains all examples.
Example #2: similar example but using drag and drop instead of a file selector
Example #2: similar example but using drag and drop instead of a file selector
Here is much the same code, but this time it uses drag and drop to collect the filenames, not an input field. Try it at JSBin and look at the source code - there are plenty of comments.
And here is the PHP code for the server-side part of examples #1 and #2
And here is the PHP code for the server-side part of examples #1 and #2
This code is given "as is":
<?php
if (isset($_POST['givenname']) && isset($_POST['familyname'])) {
echo $_POST['givenname'].' '.$_POST['familyname'].' uploaded file(s).<br />';
}
if (isset($_POST['namesAllFiles']) && $_POST['namesAllFiles'] != "") {
$folderName = date("m.d.Y");
if (!is_dir('upload/'.$folderName)) {
mkdir('upload/'.$folderName);
}
$filesName = explode("::", $_POST['namesAllFiles']);
for ($i=0; $i < count($filesName); $i++) {
copy('upload/RecycleBin/'.$filesName[$i],
'upload/'.$folderName.'/'.$filesName[$i]);
unlink('upload/RecycleBin/'.$filesName[$i]);
echo "$filesName[$i] uploaded<br />";
}
}
$fn = (isset($_SERVER['HTTP_X_FILENAME']) ?
$_SERVER['HTTP_X_FILENAME'] : false);
if ($fn) {
if (!is_dir('upload/RecycleBin')) {
mkdir('upload/RecycleBin');
}
file_put_contents('upload/RecycleBin/'.$fn,
file_get_contents('php://input'));
exit();
}
?>
Explanations:
Explanations:
When files are first uploaded, they are stored in a directory called upload/RecycleBin. If it does not exist, this directory is created (lines 22-32).
When the form is submitted, a directory whose name is today's date is created, and the files located in the RecycleBin directory are moved to that directory. If it does not already exist, the directory will be created (lines 7-20).
Page updated
Google Sites
Report abuse