PHPで写真共有サイト構築 -1 ファイルアップロード前準備 ファイル選択やらlastModifiedDateやら

では今回は実際に今回作成した写真アップロード処理だー。

＜機能＞

• アップするフォルダを選択可能
• 複数ファイルを選択可能
• サムネイル一覧を表示可能
• サムネイル一覧から複数選択でダウンロード可能
• サムネイル選択後、実サイズの写真表示時に次ボタン、前ボタンでサムネイル一覧の前後の写真を表示

上記機能を実現するにあたり以下の機能も必要

• アップ時にサムネイル用画像作成
• 実ファイルも一定サイズを超えるとサーバに負荷がかかるため、一定サイズで圧縮
• アップするファイル名は写真撮影時の情報でソートできるように撮影時の時間でリネイムする

ではまずは今回はファイルのアップロードを作成するに必要な処理を説明。


ファイルをアップロードするには当然ユーザに

1. ローカルファイルを選択させ
2. 送信ボタンを押下

させる必要あり。でユーザが２送信ボタンを押下したところで、htmlのformをつかってphpのファイルアップロード処理を呼び出す。

今回2を送信する前にやるべきことについて。
ポイントは、

1. ファイル選択させる方法として、HTML5から可能になった複数ファイル選択させる
2. ファイル選択した際にファイル属性からファイル作成日を取得しておく

1はHTML5の機能なので簡単。以下参照。

  HTML5 基礎 複数ファイル選択

２はJavascriptのlastModifiedDateで取得可能
以下ソース。

function setFileCnt(form){
  var files = document.getElementById("selectFile").files;
  var fileCnt = form.fileCnt;
  var h = "";
  var n = "";
  var fName = "";
  var fileLen = files.length;
  for (var i = 0; i < fileLen; i++) {
    var file = files[i];

    // 最終更新日を取得
    var modifileDate = file.lastModifiedDate;
    var date = new Date(Date.parse(modifileDate));
    var yy = date.getYear();
    var MM = date.getMonth() + 1;
    var dd = date.getDate();
    var hh = date.getHours();
    var mm = date.getMinutes();
    var ss = date.getSeconds();
    if (yy < 2000) { yy += 1900; }
    if (MM < 10) { MM = "0" + MM; }
    if (dd < 10) { dd = "0" + dd; }
    if (hh < 10) { hh = "0" + hh; }
    if (mm < 10) { mm = "0" + mm; }
    if (ss < 10) { ss = "0" + ss; }
    fName += yy + MM + dd + "_" + hh + mm + ss + "";
    fName += ":";
    form.filesName.value = fName;
  }    
}

ポイントはファイルfile属性のlastModifiedDateで取得したデータをnew DateでData型にしてから日付を編集すること。以下が実際にできるファイル名。

  元ファイル名：IMG_2186.JPG

  作成日：2011/05/21 09:16 40秒

  作成されるファイル名：20110521_091640_IMG_2186.JPG

どす。これでファイルアップロードした先でもソート楽ちん！！