PHP
HTML5

自分用: html5とphpを用いた複数ファイルのアップロード

More than 1 year has passed since last update.


自分用: 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 以外の数値