クリえいてぃぶ

仕事はソフトウェア開発。
趣味はAndroidとかWeb。

一応現代の職人。

職人の本質は常にクリえいてぃぶなことに挑戦し続けること。

でも今やっていることは、誰かがやってきたことの組み合わせ。


自分ができること、自分しかできないこと、見つける。

それで本物の職人になる。

目が覚める瞬間。

PHPで写真共有サイト構築 -2 実際のアップロード処理

今回は実際のアップロード処理について。

前回までにPHPのアップロード処理を呼ぶまでの前処理について説明。

http://kenzy-goldentime.blogspot.com/2011/06/php-2lastmodifieddate.html

今回のポイント

1. アップロード先、ファイル数、ファイル名をパラメータで受け取る
2. $_FILES属性でアップロード元情報とアップロード先情報を取得
3. 写真が横長か縦長かを判定し、見える方向で画像を登録
4. image用とthumbnail用の画像を作成

です。

まず１.のPHPとして受信した情報の取得について。

以下コード

　　$photoDir = $_POST["photoDir"];

PHPでPOSTのパラメータを取得するには、$_POST["パラメータ名"]で取得可能。

次に2.の$_FILESについて。

変数「$_FILE」には、アップロードされたファイル情報が連想配列で格納されるらしい。

http://www.php-ref.com/web/03_move_uploaded_file.html

で、とりあえず今回使用する$_FILES属性は

• $_FILE[ パラメータ名 ][ tmp_name ]　→アップロード前の一時保存パス
• $_FILE[ パラメータ名 ][ name]　→アップロードファイル名

まずは上記のパラメータからtmp_nameから実際にそのファイルがあるかを判定。以下ソース

if (is_uploaded_file($tmpName)) {

次に3.getimagesizeを使用してサイズを取得し、横長か縦長かを判定。

$Jsize=getimagesize("$tmpName"); //画像サイズ取得

    // 横長写真
    if ($Jsize[0] > $Jsize[1]) {
      $Jthumsize = $Jsize[0];
      $SizeWidth = true;
    // 縦長写真
    } else {
      $Jthumsize = $Jsize[1];
      $SizeWidth = false;
    }

最後に4.image用とthumbnail用に画像を圧縮。

以下ソース。

function imageComplex($pixel, $Jsize, $Jthumsize, $SizeWidth, $motoFile, $complexFile){
  if($Jthumsize >= $pixel + 1){ //121ピクセル以上なら
    if ($SizeWidth) {
      $Jwidth = $pixel; //横120ピクセル
      $Jheight = $Jsize[1] * $pixel / $Jsize[0]; //縦サイズを計算
    } else {
      $Jwidth = $Jsize[0] * $pixel / $Jsize[1]; //横サイズを計算
      $Jheight = $pixel; //縦120ピクセル
    }
    $imagein=imagecreatefromjpeg("$motoFile"); //画像を縮小する
    $imageout=imagecreatetruecolor($Jwidth,$Jheight); //サイズ変更（GD2使用）
    imagecopyresampled($imageout,$imagein,0,0,0,0,$Jwidth,$Jheight,$Jsize[0],$Jsize[1]);
    imagejpeg($imageout,("$complexFile")); //サムネイル書き出し
    imagedestroy($imagein); //メモリを解放する
    imagedestroy($imageout); //メモリを解放する
  }
    else {//画像の横幅がもともと120ピクセル以下の場合は [thumbs] ディレクトリにコピーします。
    copy("$motoFile","$complexFile"); //ファイルコピー
  }
}

以下１～３のコード

if (is_uploaded_file($tmpName)) {
  $image =  $imageDir . $fileName;
  $thumb =  $thumbDir . $fileName;
    $Jsize=getimagesize("$tmpName"); //画像サイズ取得

    // 横長写真
    if ($Jsize[0] > $Jsize[1]) {
      $Jthumsize = $Jsize[0];
      $SizeWidth = true;
    // 縦長写真
    } else {
      $Jthumsize = $Jsize[1];
      $SizeWidth = false;
    }

    // image圧縮
    imageComplex(1600, $Jsize, $Jthumsize, $SizeWidth, $tmpName, $image);

    // thumb圧縮
    imageComplex(120, $Jsize, $Jthumsize, $SizeWidth, $tmpName, $thumb);


    chmod($image, 0644);
    echo $fileName . "をアップロードしました。";

} else {
  echo "ファイルが選択されていません。";
}

とまー、PHPで書くとスクリプト言語でデバッグしやすいかな。

ただ統一感をだすにはCAKEとかのフレームワークつかっていいかも。

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

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