ページ遷移(リロード)をせずにPOSTデータの処理をする際にはjQueryを利用するのが主流になっているかと思いますが、そのjQueryにはファイル(type=”file”)のPOST機能は今の所ありません。
 といってもjQuery.upload等のプラグインを利用すれば簡単に実現出来るのですが、あえてjQueryを使用せずにファイル(画像)を表示させる仕組みを自作してみました。

 以下サンプルは、表示・ファイル送信用ページ(uploadimage.html)と、アップロード処理を行うプログラム(uploadimage.php)の2ファイル構成となっています。

・uploadimage.htmlソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Spot Map Entry Data</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css">

<script type="text/javascript">
<!--

   function addImageRow(imgfile,w,h) {

      var imgwidth;
      var imgheight;
      var maxwidth = 240;
      var maxheight = 180;

      if(w <= maxwidth && h <= maxheight){
          imgwidth = w;
          imgheight = h;
      } else if ((w / maxwidth) > (h / maxheight)) {
          imgwidth = maxwidth;
          imgheight = maxwidth*h/w;
      } else {
          imgwidth = maxheight*w/h;
          imgheight = maxheight;
      }
      var tbl = document.getElementById("imagetable");
      var rowcounts = tbl.rows["length"];
      var colcounts = 3;
      var tblRow;
      var rNo;
      var cNo;
      var newRowFlag = false;
      if (rowcounts == 0) {
         newRowFlag = true;
      } else if (tbl.rows[rowcounts-1].cells["length"] == colcounts) {
         newRowFlag = true;
      }
      if (newRowFlag) {
         tblRow = tbl.insertRow(rowcounts);
         tblRow.setAttribute("id", "img"+rowcounts);
         tNo = rowcounts;
         cNo = 0;
      } else {
         tblRow = document.getElementById("img"+(rowcounts-1));
         tNo = rowcounts-1;
         cNo = tbl.rows[rowcounts-1].cells["length"];
      }
      var tblCell = tblRow.insertCell(cNo);
      tblCell.setAttribute("width", maxwidth+10);
      tblCell.setAttribute("height", maxheight+10);
      tblCell.setAttribute("align", "center");
      tblCell.setAttribute("id", "img"+tNo+cNo);
      image = document.createElement("img");
      image.setAttribute("src", imgfile);
      image.setAttribute("width", imgwidth);
      image.setAttribute("height", imgheight);
      tblCell.appendChild(image);
   }
// -->
</script>
</head>

<body>
  <table>
  <tr>
    <td style="font-weight:bold;font-size:20px;padding:10px 30px">アップロード画像をリロードせずに表示</td>
  </tr>
  <tr>
    <form id="f_uploadimage" name="f_uploadimage" target="targetFrame" method="POST" action="uploadimage.php" enctype="multipart/form-data">
    <td style="font-size:14px;padding:10px 30px;">画像:
        <input type="hidden" name="MAX_FILE_SIZE" value="1500000">
        <input type="file" id="imgfile" name="imgfile" size="60" onChange="this.form.submit()">
    </td>
    </form>
  </tr>
  <tr>
    <td>
       <table name="imagetable" id="imagetable" border="0" cellspacing="0" cellpadding="0"></table>
    </td>
  </tr>
  </table>
  <iframe id="targetFrame" name="targetFrame" src="" style="display:none;"></iframe>
</body>
</html>

・uploadimage.php

<?php

$imgwidth = 0;
$imgheight = 0;
$submitFlag = 0;
$upimage= "";
$err = "";

if (isset($_POST)) {
   $imgdir = "img/" ;
   $imgfile = $_FILES['imgfile'];
   if (isset($imgfile['error'])) {
      if ($imgfile['error'] == 0) {  //OK
         if ($imgfile['name']) {
            $upimage = $imgdir.$imgfile['name'];
            if (move_uploaded_file($imgfile['tmp_name'],$upimage)) {
               $imginfo = getimagesize($upimage); //画像の情報を取得
               if($imginfo){
                  //画像形式をチェック $imginfo[2]==> 1:GIF 2:JPEG 3:PNG
                  if($imginfo[2]==1 OR $imginfo[2]==2 OR $imginfo[2]==3) {
                     $imgwidth = $imginfo[0];  //画像幅
                     $imgheight = $imginfo[1]; //画像高さ
                  } else {  //
                     $err = "登録可能な画像ファイルの形式はJPEG、GIF、PNGです。これ以外の画像形式には対応していません。";
                  }
               } else {
                  $err = "登録可能なファイルの形式はJPEG、GIF、PNGです。これ以外のファイルは登録出来ません。";
               }
            } else {
               $err = "ファイルのアップロードに失敗しました。";
            }
         } else {
           $err = "ファイルが指定されていません。";
         }
      } elseif ($imgfile['error'] == 1 OR $imgfile['error'] == 2) { //1:UPLOAD_ERR_INI_SIZE 2:UPLOAD_ERR_FORM_SIZE
         $err = "画像ファイルのサイズが大きすぎてアップロード出来ません。";
      } elseif ($imgfile['error'] == 3) {  //UPLOAD_ERR_PARTIAL
         $err = "画像ファイルのサイズが大きすぎてアップロード出来ませんアップロードされたファイルは一部のみしかアップロードされていません。";
      } elseif ($imgfile['error'] == 4) {  //UPLOAD_ERR_NO_FILEL
         $err = "ファイルはアップロードされませんでした。";
      } elseif ($imgfile['error'] == 6) {  //UPLOAD_ERR_NO_TMP_DIR
         $err = "テンポラリフォルダがありません。";
      } elseif ($imgfile['error'] == 7) {  //UPLOAD_ERR_CANT_WRITE
         $err = "ディスクへの書き込みに失敗しました。";
      } elseif ($imgfile['error'] == 8) {  //UPLOAD_ERR_EXTENSION
         $err = "PHP の拡張モジュールがファイルのアップロードを中止しました。";
      } else {
         $err = "エラーが発生しました。";
      }
   } else {
      $err = "アップロードエラー";
   }
}else{
   $err = "アップロードエラー";
}
?>

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
<!--
<?php 
   echo "var imgwidth = '" . $imgwidth . "';\n";
   echo "var imgheight = '" . $imgheight . "';\n";
   echo "var upimage = '" . $upimage . "';\n";
   echo "var errMsg = '" . $err . "';\n";
?>

if(errMsg.length == 0){
   parent.addImageRow(upimage,imgwidth,imgheight);
} else {
   alert(errMsg);
}

// -->
</script>
</head><body></body></html>

処理の流れは概ね以下のようになっています
1.フォームデータ(アップロード情報)をPOST
・uploadimage.html 71行目

<form id="f_uploadimage" name="f_uploadimage" target="targetFrame" method="POST" action="uploadimage.php" enctype="multipart/form-data">

 ここではaction=”uploadimage.php”としていますので、通常であれば「uploadimage.php」にページ遷移してしまうのですが、target=”targetFrame”としていることがポイントです。
 この「targetFrame」というのは84行目にあるインラインフレームの名称で、つまりuploadimage.phpを現ウインドウではなくインラインフレームで実行させています。そのため、uploadimage.phpの実行結果はページ遷移することなくインラインフレーム上に表示されることになります。
 ※ただし、当サンプルソースではtargetFrameは非表示設定(style=”display:none;”)にしているため、見た目上は何の変更もありません

2.uploadimage.phpにて画像のアップロード処理を実行
 サンプルでは、POSTされたファイルが画像であるかのチェックや画像サイズの取得等を行っています。
 ※本当はアップロードファイル名が日本語(ダブルバイト)であった場合を考慮してリネームしてサーバ保存した方が良いのですが、当サンプルでは省略しています。

3.uploadimage.html内のアップロード画像追加表示のjavascriptをuploadimage.phpより呼び出し
・uploadimage.php 70行目:
parent.addImageRow(upimage,imgwidth,imgheight);
 addImageRowは画像追加表示の関数(11~60行目)ですが、頭にparentを付加して呼び出しているのはuploadimage.phpがインラインフレーム上で実行されているためです。

 おそらくjQueryの画像アップロードのプラグインも似たような処理を行っているのではと思います。

 

コメント   

最近話題の「リアル脱出ゲーム」を企画しているSCRAPが主催するイベント
【リアル捜査ゲーム】よみうりランド園長誘拐事件 vol.2 ~月の指輪の秘密~
に参加してきました。

各所を観察したり、パズルを解いたり、暗号を解読したりetc…知力と行動力を駆使して謎を解明し、
「誘拐された園長を救出する」という内容。捜査情報は極秘のため明かすことは出来ませんが・・・。

子連れの友人と4人で挑んだ我々のチームは、最後の謎まではたどり着いたものの、そこでタイムオーバー。残念ながら園長救出は出来ませんでした。なんとも悔しいのですが、ちょうどその位の段階で時間切れとなるあたり、難易度設定が絶妙ですね。

「捜査」では、よみうりランド園内を歩き回る必要があるので、天気に恵まれたのはラッキーでした。
この手の企画、病みつきになりそうです。

リアル捜査ゲーム

 

コメント   

 2012板橋Cityマラソンに参加してきました。
 かつての「荒川市民マラソン」から名称変更されたようですが、コース自体は変わっていません。旧名時も含め今回が15回目の開催なので、市民ランナー対象のフルマラソンの大会としては歴史がある方だと思います。一昨年は強風のため、昨年は震災直後のため中止となってしまったので3年ぶりの開催です。

 私の初マラソンは2006年のこの大会でした。いわゆる「30キロの壁」と電車が止まってしまう程の強烈な向かい風に負けて後半ボロボロに・・・それも今思えばいい経験。

 今大会は、ずっと荒川沿いを走る単調なコースで沿道の声援も少ないですが、とにかくエイドが充実しています。さすが回を重ねているだけあって運営も手慣れたもの。ボランティアのボーイスカウトの少年少女達のサポートは素晴らしく、毎度の事ながら感謝しきりです。

 この日は、今にも雨が降りそうな天気でしたが風がほとんどなく記録を狙うには絶好のコンディション。でも個人的には、もう少し暖かいと嬉しかったかな・・・35キロ過ぎの名物のシャーベットは、寒くて全部は食べられませんでした。

 数年来の貧血(ランナーの職業病?)で、全開では走れない状態のため自己ベストには程遠い内容でしたが、6年前のように30キロの壁に跳ね返されることもなく、最低限の目標(3時間半切り)はギリギリで達成出来ました。

参加賞

参加賞のスポーツタオル

 昨年までのTシャツから変更となったようです。Tシャツは大会参加の度に増え続け有り余っているので、タオルは歓迎ですが、ちょっと安っぽいかなあ。

大会オリジナル帽子

大会オリジナル帽子(500円)

 中止になった昨年も、帽子は後日郵送で送られてきたのですが、数回使用しただけでツバの部分が剥がれてしまい使えなくなりました。今年も作りは同じようなので多分・・・まあ、500円だから仕方なしか。

コメント   

2012年3月13日(火)
 明日で終わりの「フェルメールからのラブレター展」を見に、Bunkamuraザ・ミュージアムに滑り込みで行ってまいりました。
 ここ10年、15年くらいで急に人気が沸騰した画家の代表格といえるフェルメール(日本画では伊藤若冲)。会期末のせいもあるでしょうが、平日なのにかなり混んでいました。
 本展覧会のフェルメール作品は3点。本来であれば「17世紀オランダ絵画展」などと銘打つべきなんでしょうが、やはりフェルメールの名を冠にした方が集客が期待できるのでしょう。
 昨年には、1点しかないのに「フェルメール」を冠にした展覧会が同じBunkamuraで開催されたくらいなので、3点も来日した今回は堂々と名乗れる?

手紙を読む青衣の女(ヨハネス・フェルメール)

手紙を読む青衣の女(ヨハネス・フェルメール)

 フェルメールブルー(ラピスラズリ)全開の作品。
 テレビでも紹介されていましたが絵画修復家の岩井希久子さんによる仕事で、修復前とは見違えるような色合いに蘇っています。
 

手紙を書く女(ヨハネス・フェルメール)

手紙を書く女(ヨハネス・フェルメール)

 代名詞的な青だけでなく、黄色が印象的なものも多いですね。といっても作品の絶対数自体が少ないので大した点数にはなりませんが・・・。
 

手紙を書く女と召使い(ヨハネス・フェルメール)

手紙を書く女と召使い(ヨハネス・フェルメール)

 今回の3作品の中では、これが一番良かったです。
 この絵のように「左に窓があってそこから光が差し込む」という構図は、フェルメール作品のパターンの1つですが、これはアトリエ環境によるものなんでしょうか?
 

中庭にいる女と子供(ピーテル・デ・ホーホ)

中庭にいる女と子供(ピーテル・デ・ホーホ)

室内の女と子供(ピーテル・デ・ホーホ)

室内の女と子供(ピーテル・デ・ホーホ)

 個人的にはフェルメールよりもデ・ホーホの方が好きです。色合いの鮮やかさや光の表現といった点では1歩譲るかもしれませんが、フェルメール作品よりも生活感があるというか血が通っていて暖かい印象を受けるので・・・・。しかし日本の展覧会ではいつもフェルメールの露払い的な脇役になってしまっているデ・ホーホ・・・何とも残念です。
 
 

 本展覧会の作品は計41点と少なめでしたが、他にもヤン・ステーンやデ・ブライなどフェルメールに引けを取らない素晴らしいものが多く見所たっぷりでした。
 あとはファブリウスの作品があればもっと良かったのですが。

生徒にお仕置きをする教師(ヤン・ステーン)

生徒にお仕置きをする教師
(ヤン・ステーン)

ミヒール・コマンスと妻エリザベト・ファン・デル・メルシュ(ミヒール・ファン・ムスヘル)

ミヒール・コマンスと妻エリザベト・ファン・デル・メルシュ
(ミヒール・ファン・ムスヘル)

ヤーコプ・ビーレンスとその家族(ヘンドリック・マルテンスゾーン・ソルフ)

ヤーコプ・ビーレンスとその家族
(ヘンドリック・マルテンスゾーン・ソルフ)

アブラハム・カストレインとその妻マルハレータ・ファン・バンケン(ヤン・デ・ブライ)

アブラハム・カストレインとその妻マルハレータ・ファン
・バンケン(ヤン・デ・ブライ)

手紙を読む女とトリック・トラック遊びをする男たち(フランス・ファン・ミーリスとヤン・ファン・ミーリス)

手紙を読む女とトリック・トラック遊びをする男たち
(フランス・ファン・ミーリスとヤン・ファン・ミーリス)

レター・ラック(エドワールト・コリエル)

レター・ラック
(エドワールト・コリエル)

 会期末が近い展覧会を優先させている結果、最近の美術館鑑賞はいつもギリギリのタイミングになってしまっています。改善しなければ・・・。

コメント   

お隣の調布市で行われた多摩川灯籠流しに参加してきました。

ポスター

ポスター

手作りの灯籠

手作りの灯籠

灯籠流しの様子1

灯籠流しの様子1

灯籠流しの様子2

灯籠流しの様子2

明日へ向かって、復興への想いを乗せて・・・

コメント   

 ロンドンオリンピックの最終選考である名古屋ウィメンズマラソンは凄いレースでした。
 中でも野口みずき選手の不屈の走りには感動しました。結果は残念でしたが、レース後の会見での現役続行宣言は嬉しい限り。
 しがない市民ランナーの私ですが、野口選手の名言「走った距離は裏切らない」を胸に、5月開催のUTMF完走を目標に毎日鍛錬しています。

コメント   

ジョギング帰りに寄りました。

ランチタイム(16:00迄)にはセットでサラダ、スープ、コーヒー、ミニアイスが付いて850円とCP高いです。
ミニアイスは+350円でケーキにすることも出来ます。この日は、いつもより多めに走ったのでカロリー制限のリミッターを解除し、ケーキセットにしました(計1,200円)。

サラダ
 普通のサラダですが、ドレッシング(自家製?)が美味しかったです。

スープ
 溶き卵、エノキ、エリンギ、キャベツ等が入った野菜スープでした。塩気が少なく優しい感じの薄味。
 ラーメン等で濃い味に慣れている人は味気なく感じるかもしれませんが、個人的には凄く好みです。

ランチセットのサラダとスープ

ランチセットのサラダとスープ

オムライス
 卵はいわゆる「ふわとろ」ではありません。固まって皮状になっているわけでもなく、ちょうどその中間といったあたり。
 中のケチャップライスの具はチキンでもハムでもなく、ひき肉でした。
 具は少なめですがハッシュドビーフ風のソースがかかっているので物足りなさはありませんし、ボリュームたっぷりですが途中で飽きてしまうこともありませんでした。

オムライス

オムライス

ケーキ
 スポンジはバターを使っていないそうです。フルーツたっぷりで甘さ控えめのさっぱりスイーツ。メインのオムライスで既に満腹でしたが完食です。

コーヒー
 美味しい!お店なんだから当然と言ってしまえばそれまでなんですが、これはポイント高いです。

コーヒーとデザートのスイーツ

コーヒーとデザートのスイーツ

年配のご主人は実直そうな方で、気持ちの良い接客でした。盛り付けも丁寧で手抜きがないイメージ。
味だけで言えばもっと美味しい店もあるのでしょうが、私は接客が気になる(味の印象も接客1つでガラッと変わってしまう)タイプなので、トータルでかなり満足度高いです。
店は、駅から遠く分かりづらい所にあります。伺った時刻が15時頃と遅めだったせいかもしれませんが客は私一人でした。こういうお店は無くならないでほしいですね。
八王子夢美術館から程近いので、展覧会帰りにでも再訪しようと思います。

MAP

地図

コメント