【PHP】複数ファイルの同時アップロードHTML5版

2020年10月13日  このエントリーをはてなブックマークに追加 

複数ファイルの同時アップロードが必要な場合ってありますよね。

昔はFlashで実装されていたりしたのですが、HTML5で標準機能となっていたのでした。

input file multiple

HTMLのform部分だけならこんな感じです。

form

<form action="mupload.php" method="post" enctype="multipart/form-data">
<input id="upfile" name="upfile[]" type="file" multiple="multiple">
<input type="submit" value="アップロード" />
</form>

 

type="file"だけならば、通常のファイルアップロードと同じですが、mutiple属性を付加すれば、複数ファイル対応となります。

 

簡単すぎる

こんな簡単だったら、input fileの後ろにmultipleって書いて試しますよね。

そんな思いで、複数ファイルを選択するとこうなります。

複数ファイル選択結果(下の結果はイメージです)

「2ファイル」ってどれとどれよ?

これをこのまま実装したら、確実にツッコミが入るので、これで終わりには出来ませんね。

 

jQueryがあればなんとかなる

別にjQueryがなくてもなんとかなるかもしれませんが、既にあったので使います。

form

formの後ろにulでリストをくっつけます。

<form action="mupload.php" method="post" enctype="multipart/form-data">
<input id="upfile" name="upfile[]" type="file" multiple="multiple">
<input type="submit" value="アップロード" />
</form>
<ul id="uplist">
</ul>

 

javascript

jQueryでリストにファイル名を出力します。

$(function () {
$('#upfile').change(function () {
$('#uplist').empty();
$.each(this.files, function(i, f) {
$('#uplist').append($('<li/>').text(f.name));
});
});
});

 

複数ファイル選択結果修正版(イメージです)

 

これならば、リストで選択したファイル名が出力されるため、安心感がありますね。

実際に動かしてみたい方、詳しいソースが見たい方は下のリンクからサンプルを実行してみてください。

※アップロードボタンを押してもアップロードはされません。

サンプルで実際に見てみる

 

PHP側のファイル受け取り処理

PHP

PHP側では$_FILESから配列で受け取ります。

define('MULTI_UPLOAD_DIR', '/var/www/html/up/');
foreach ($_FILES['upfile']['name'] as $i => $name) {
if ($name === '') {
continue;
}

// アップロードファイルの名前
$newname = MULTI_UPLOAD_DIR . 'up_' . md5(uniqid(rand(), true)). '.' . pathinfo($name, PATHINFO_EXTENSION);

// 移動
move_uploaded_file($_FILES['upfile']['tmp_name'][$i], $newname);
}

 

$_FILESの既存のtemp_name、name等の各要素がそれぞれ配列になるという、変わった感じの受け取り方になります。

上記のソースでは、外部から参照できるディレクトリにランダムなファイル名を付け直して移動させています。

アップロード、即参照みたいなページ用です。


 


リンク