HTML5のメディアアップロード機能
HTML5はメディアのアップロード機能を持っており，formの中で
<input type="file" />とすることで，簡単にPC内やスマホに格納されている画像やムービーをアップロードできる．
サーバ側のプログラムは，PHPが一番簡単で，常駐プロセスを起動する必要がないため，多くのレンタルサーバに設置することができるので，これを用いる．
サンプル
HTML側
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>画像ファイルアップロードのサンプル</title>
</head>
<body>
<!-- サーバ側のプログラムのパスを書いておく．今回はHTMLファイルと同じ階層にあるPHP -->
<form action="file_uploader.php" method="post" enctype="multipart/form-data">
<p>
<input name="userfile[]" type="file" accept="image/*" id="upfile" onChange="printFile()"/>
<!-- accept="image/*" というのは，画像ファイルのみを受け付けるという意味 -->
<!-- onChange はサブミットされた時に実行する関数を書いておく．このサンプルでは下のprintFile関数 -->
</p>
<p>
<input type="submit" name="send" value="アップロード" />
</p>
</form>
<div id="result">
<p>
アップロードで選択されたファイル
</p>
</div>
<script>
// 単純にアップロードするファイル名を表示するだけ
function printFile(){
let fileList = document.getElementById("upfile").files;
let list = "";
for(let i=0; i<fileList.length; i++){
list += fileList[i].name + "<br />";
}
document.getElementById("result").innerHTML = list;
}
</script>
</body>
</html>PHP(サーバ)側
<?php
// 複数アップロード可能なので，for文で回す
for ($i=0; $i<count($_FILES['userfile']['name']); $i++) {
// ファイル名を取得
$file_ext = pathinfo($_FILES["userfile"]["name"][$i], PATHINFO_EXTENSION);
if (is_uploaded_file($_FILES["userfile"]["tmp_name"][$i])) {
// ファイル名が重複しないようにアップロードした日時をファイル名につけて，
// HTML5とApache標準の仮のアップロード場所から，
// 実際の保存場所にファイルを移動させる
// このプログラムでは，htmlとphpが置いてあるフォルダの中のimgフォルダに保存する
// 日時の取得
$uploaded_date = date("YmdHis");
// もしちゃんとアップロードされていたら，
// 移動して，中括弧の中を実行する
if(move_uploaded_file($_FILES["userfile"]["tmp_name"][$i], "img/" . $uploaded_date . "_" . $_FILES["userfile"]["name"][$i])){
// アップロードされたことを表示する
echo "<p>" . $uploaded_date . $_FILES["userfile"]["name"][$i] . "をアップロードしました．<p>";
// アップロードしたファイルのパーミッションをいじれるようにする
// Webサーバプログラムがオーナーになっているので，
// ユーザが消せるように777
chmod("img/" . $uploaded_date . "_" . $_FILES["userfile"]["name"][$i],0777);
// img以下の画像ファイルを検索して表示
echo '<p>現在までアップロードされたファイル一覧</p>';
foreach(glob('img/{*.gif,*.jpg,*.jpeg,*.png,*.tif,*.tif}',GLOB_BRACE) as $file){
if(is_file($file)){
echo htmlspecialchars($file) . '<br />';
}
}
// アップローダのhtmlに戻る表示
echo "<p><a href='./file_uploader.html'>アップローダへ戻る</a></p>";
} else {
echo "<p>ファイルをアップロードできませんでした．</p>";
}
} else {
echo "<p>ファイルが選択されていません．</p>";
}
}
?>