読者です 読者をやめる 読者になる 読者になる

log

日記です

HTML5+PHPで複数ファイルアップロード

Web

HTML5だと、標準で複数ファイルのアップロードに対応しているらしいんで、ちと試してみました.
IE9で動かなくて、Chromeで動きました.
詳しく調べてませんが、多分webkit系ブラウザじゃないと動きません…。

参考サイト

下記のサイト参考にさせて頂きました!
HTML5でファイル複数同時アップロード | Suinasia
http://suin.asia/2011/01/23/html5_input_multiple

HTML5側でやること

<input type="file" name="upfile[]" multiple>

multiple属性を指定することで、ファイル選択ダイアログで複数選択ができるようになります.
name属性のパラメータは[]を付けて明示的に配列を宣言しないとだめみたいです.

PHP側ですること

$_FILESに配列でファイルが入ってくるんで、それを展開し処理します.
アップロードされたファイルは、サーバーのtmpに保存されるので、それを任意のディレクトリに移動します.場所は$_FILES["upfile"]["tmp_name"][添え字]に入ってます.
自分のコードでは、$_FILES["upfile"]["tmp_name"]の配列の数を代表として取得し、その配列の数をループでまわしています.
ちょっとやっつけっぽいコードですが…まぁいいかな?笑
同じファイル名のアップロードが来たとき、上書きされてしまう対処は、アップされたファイル名の頭にタイムスタンプを付けることで、回避しています.
それでもファイル名がかぶってしまった場合は、エラー出してます.
(ユニークなID振ればいいんだけど、妥協.ついでに日付分かって便利という事で)

HTML5コード

参考サイトをまんま利用させて頂きました.

<!-- index.html -->
<html>
<head>
	<title>multiple upload</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<form action="./upload.php" method="post" enctype="multipart/form-data">
Files:<input type="file" name="upfile[]" multiple>
<input type="submit" value="submit">
</form>
</body>
</html>

PHP側コード

自分が書いたのはサーバーサイドのコードです.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>複数ファイルupload</title>
</head>
<body>
<p><?php

for ($i = 0; $i< count($_FILES["upfile"]["tmp_name"]); $i++) {
	if (is_uploaded_file($_FILES["upfile"]["tmp_name"][$i])) {
		$fileName = "files/".date("[Y-m-d_His]").$_FILES["upfile"]["name"][$i];
		if (file_exists($fileName)===false) {
			if (move_uploaded_file($_FILES["upfile"]["tmp_name"][$i], $fileName)) {
				chmod($fileName, 0644);
				echo $_FILES["upfile"]["name"][$i] . "をアップロードしました。<br>";
			} else {
				echo "アップロードエラー";
			}
		} else {
			echo "既にファイルが存在します。少し時間をおいてやり直してください。";
		}
	} else {
	  echo "ファイルが選択されていません";
	}
}

?></p>
</body>
</html>

他にも…

  • jQueryを使って画面遷移なしアップロード
  • File APIを使ってドラッグ&ドロップで操作性UP

的なやり方がありそう
ブラウザにドラッグ&ドロップでファイルをアップロードする、ってWebアプリケーション的にかなり夢のあるお話!!
ちと後で試そう