簡易アップローダー

2013/01/03

PHP

知人とそこそこ大きいサイズのデータをやり取りする際、宅ファイル便を使用していましたが、相手側がアカウントを作成していないとちょっと手間なので、簡易アップローダーを作ってみました(PHPで簡単に作れるタイプのものですが...)。
機能的には、極力シンプルなもので、自分のサーバーに置けるといったものです。

▼機能はこんな感じ
・アップロードサイズの上限を設定できる
・アップロードしたファイル名・サイズ・形式の判定
・既にアップロードされているファイルが同名の場合は上書きしない
※ファイルの削除機能は入れていません(自分のサーバーですし)。
※認証機能は入れていません(認証方法は他にもいろいろありますので)。

Keyword：アップローダー,PHP

簡易アップローダー

ディレクトリ構成

補足

●common.css
ブラウザ表示でのレイアウト調整用のCSS。

●ie9.js
IE8以前でもCSS3を使用するため、ie9.jsを使用。
※テーブルタグで使用するスタイルにCSS3を使っています。
ie9.jsとテーブルタグ用CSS3に関しては、以下の記事でも紹介しています。
⇒ ｢HTML5.jsとIE9.js｣
⇒ ｢CSSでテーブルタグ(table･th･tr･td)を扱いやすくする｣

●upload
このフォルダの中に、アップロードしたファイルが格納されます。

●index.html
アップロード画面用のHTML

●uploader.php
アップローダー作成用のPHPスクリプト

では、それぞれのソースを紹介します。
ie9.jsは、ダウンロードして読み込むだけですので省略します。
上記の記事で詳細をご覧ください。

参考ソース

common.css

@charset "utf-8";

/* フォント */
body {
        font-size: 13px;
        line-height: 22px;
        color:#484848;
        font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;
        letter-spacing: 0.1em;
        text-align: left;
}

/* ファイル選択 */
.file_select input {
        width: 300px;
        margin: 0px 0px 10px 0px;
        padding: 3px;
        font-size: 12px;
        color:#484848;
        font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;
        background-color: #ffffff;
        border: solid 1px #999999;
}

/* チェックボックス */
.checkbox input {
        margin: 0px 0px 10px 0px;
}

/* アップロードボタン */
.upload input {
        margin: 0px;
        padding: 5px 20px;
        font-size: 12px;
        color:#484848;
        font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;
        background-color: #f0f0f0;
        border: solid 1px #999999;
}

/* 結果表示のタイトル */
h1 {
        font-size: 13px;
        font-weight: bold;
        margin: 0px 0px 10px 0px;
}

/* 警告時のテキストカラー */
.attention {
        color:#ff0000;
}

/* table幅(隣接するセルのボーダーを重ねて表示) */
table.tb_style {
        width: 450px;
        border-collapse: collapse;
}

/* tr */
table.tb_style tr {
        padding: 5px;
        background-color: #FFFFFF;
}

/* 1行目のtr */
table.tb_style tr:nth-child(1) {
        padding: 5px;
        background-color: #f0f0f0;
        text-align: center;
}
/* td */
table.tb_style td {
        width: 150px;
        padding: 5px;
        border:1px solid #999999;
}

補足

●フォント
bodyタグにフォント表示用のスタイルを記述。

●ファイル選択
アップローダーでファイルをアップロードする際のファイル選択用のスタイルを記述。

●チェックボックス
“既にアップロードされているファイルが同名の場合は上書きしない”のチェックボックス用のスタイルを記述。

●アップロードボタン
アップロードボタン用のスタイルを記述。

●結果表示のタイトル
結果表示のタイトル用のスタイルを記述。

●警告時のテキストカラー
エラー出力時のテキストカラー用のスタイルを記述。

●table幅(隣接するセルのボーダーを重ねて表示)
table用のスタイルを記述。

●tr
tr用のスタイルを記述。

●1行目のtr
1行目のtrのみ、背景色とテキスト揃えを変更。
“nth-child(1)”は、CSS3の擬似クラスです。

●td
tdのスタイルを記述。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/common.css">
<script src="js/ie9.js"></script>
</head>
<body>
<form method="post" action="uploader.php" enctype="multipart/form-data">
<p class="file_select">
<!--アップロードサイズの上限：100MB-->
<input type="hidden" name="max_file_size" value="100000000">
▼ファイルを選択してください(※上限100MBまで)<br>
<input name="upfile[]" type="file"><br>
<input name="upfile[]" type="file"><br>
<input name="upfile[]" type="file"><br>
<input name="upfile[]" type="file"><br>
<input name="upfile[]" type="file">
</p>
<p class="checkbox"><input type="checkbox" name="unoverwrite" value="true" checked>同名ファイルを上書きしない</p>
<p class="upload"><input type="submit" value="アップロード"></p>
</form>
</body>
</html>

補足

5行目の”<title></title>”には、ページタイトルを記述してください。

10行目の”action=”uploader.php””には、PHPスクリプトのファイル名を記述します。

13行目でアップロードサイズの上限を指定します。

参考ソースでは、5つまでファイルをアップロード可能です。
19行目以下に続けることで、アップロードできるファイル数を増やせます。

21行目は、”同名ファイルを上書きしない”にチェックが入っている場合、サーバー上に既にアップロードされているファイルの名前が同じ際にはエラーを出力し、上書きアップロードされません。

uploader.php

<?php

// アップロードディレクトリを指定
$updir = "./upload/";

?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/common.css">
<script src="js/ie9.js"></script>
</head>
<body>
<h1>▼アップロード結果</h1>
<table class="tb_style">
<tr>
<td>ファイル名</td>
<td>サイズ</td>
<td>タイプ</td>
</tr>
<?php
for($i=0;$i<sizeof($_FILES['upfile']['name']);$i++) {
  if($_FILES['upfile']['name'][$i]=="") continue;
  if(file_exists($updir.mb_convert_encoding($_FILES['upfile']['name'][$i],"utf-8","utf-8"))==TRUE && $_POST['unoverwrite']=="true") {
?>
<tr>
<td><?php print($_FILES['upfile']['name'][$i]); ?></td>
<td colspan="2"><span class="attention">上書き禁止設定になっています。<br>もう一度アップロードし直してください。<br>※ブラウザの[戻る(←)]ボタンよりアップロード画面に移動。</span></td>
</tr>
<?php
  } elseif(!is_uploaded_file($_FILES['upfile']['tmp_name'][$i])) {
?>
<tr>
<td><?php print($_FILES['upfile']['name'][$i]); ?></td>
<td colspan="2"><span class="attention">アップロードに失敗しました。<br>サイズの上限を超えていませんか？<br>もう一度アップロードし直してください。<br>※ブラウザの[戻る(←)]ボタンよりアップロード画面に移動。</span></td>
</tr>
<?php
  } else {
?>
<tr>
<td><?php print($_FILES['upfile']['name'][$i]); ?></td>
<td><?php print($_FILES['upfile']['size'][$i]); ?>Byte</td>
<td><?php print($_FILES['upfile']['type'][$i]); ?></td>
</tr>
<?php
    move_uploaded_file($_FILES['upfile']['tmp_name'][$i],$updir.mb_convert_encoding($_FILES['upfile']['name'][$i],"utf-8","utf-8"));
  }
}
?>
</table>
</body>
</html>

補足

4行目でアップロードしたファイルが格納されるディレクトリを指定します。
相対パスで指定してください(※参考ソースでは、uploader.phpからみて、同一階層にあるuploadディレクトリを指定しています)。

設定は以上です。
あとは、今回作成したファイルをサーバーにアップロードすればOK！
“ディレクトリ構成”で説明したファイルとフォルダを”uploader”等のフォルダを作って全てその中に入れ、その”uploader”フォルダごとアップロードしましょう。
アップロードしたファイルが格納されるuploadディレクトリのパーミッションは、777や707にしてくださいね。
“uploader”ディレクトリに入れるのは、このディレクトリのみ認証を効かすためです。

最後に、画面の表示イメージと注意事項を載せておきます。

ファイル選択・アップロード画面

アップロード結果画面

エラー画面(同名ファイルは上書き禁止)

エラー画面(アップロードサイズの上限越え)

注意事項としては、このままだとURLが分っている人は誰でもアクセスできてしまうので、認証を入れるようにしましょう。
簡単に認証をかけたい場合は、Basic認証かDigest認証。
共に、SSLをかけた方がもちろん安全です。
SSLが無理な場合(環境的に等)、Basic認証よりはDigest認証の方がよいですね。
Basic認証は、パスワードが暗号化されませんので、パケットを傍受されるとパスワードが分ってしまいます。
Digest認証は、パスワードがMD5ハッシュで暗号化されていますので、そう簡単にはパスワードは分りません。
理想的には、SSL+Basic認証 or Digest認証ですね。

Digest認証に関しては、｢APCでPHPの処理を高速化｣の中でも紹介しています。
よかったらご覧ください。

Prev List Next

関連記事(※当記事と関連性が高いと思われる記事)