#自分用: html5とphpを用いた複数ファイルのアップロード
タイトルのままの内容です。
html5ではinput要素にmultipleとつけると複数ファイルを簡単に選択出来て送信できます。
送信されたPHP側では、$_FILESという名前で一時保存されています。
参考サイト
JavaScript プログラミング講座
たくあんのチラシ裏 HTML5+PHPで複数ファイルアップロード
選択されたファイルの名前を取得する
あとは、accept="image/*"をinputの中に入れると画像だけ保存とか可能らしい
upload.html
<html>
<head>
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input name="userfile[]" type="file" id="upfile" onChange="printfile()" multiple><br>
<input type="submit" value="Send">
</form>
<div id="result"></div>
<script>
function printfile(){
var fileList = document.getElementById("upfile").files;
var list = "";
for(var i=0; i<fileList.length; i++){
list += fileList[i].name + "<br>";
}
document.getElementById("result").innerHTML = list;
}
</script>
</body>
</html>
upload.php
<?php
for ($i=0; $i<count($_FILES['userfile']['name']); $i++) {
$file_ext = pathinfo($_FILES["userfile"]["name"][$i], PATHINFO_EXTENSION);
if (/*FileExtensionGetAllowUpload($file_ext) && */ is_uploaded_file($_FILES["userfile"]["tmp_name"][$i])) {
if(move_uploaded_file($_FILES["userfile"]["tmp_name"][$i], "img/".$_FILES["userfile"]["name"][$i])) {
echo $_FILES["userfile"]["name"][$i] . "をアップロードしました。<br>";
} else {
echo "ファイルをアップロードできません。<br>";
}
} else {
echo "ファイルが選択されていません。<br>";
}
}
//アップロードできるファイルに拡張子の制限をかけたい時
function FileExtensionGetAllowUpload($ext){
$allow_ext = array("gif","jpg","jpeg","png","eps");
foreach($allow_ext as $v){
if ($v === $ext){
return 1;
}
}
return 0;
}
?>
| 要素名 | 解説 |
|---|---|
| name | アップロードされたファイルの名前 |
| type | アップロードされたファイルの MIME タイプ |
| size | アップロードされたファイルのサイズ |
| tmp_name | アップロードされたファイルが格納されている一時的なパス名 |
| error | エラーが無ければ 0 、エラーがあれば 0 以外の数値 |