FLASHのお勉強_アクションスクリプトaction script_画像のアップロードとサムネイル・拡大表示（PHPとの連携）

　写真などの画像ファイルをFLASHの画面からサーバーにアップロードし、phpでリサイズしてサムネイルを作成し、画面に表示させる。　さらに、拡大ボタンのクリックで、元のサイズの画像を別ウインドウで表示させるという、一連の動作の作成が今回のお勉強である。
　このSAMPLEは単に画像を表示させるだけであるが、画像入りのBBS（掲示板）への応用や、自作の画像や新作商品などをサイトに逐次表示させたいときにブラウザから登録するシステム作りなどに応用できればと思っている。
　本SAMPLEでは、サムネイル、元画像を別々のデレクトリーに保存するようにしており、それぞれが、10ファイルを超えると、古いものから削除されるようにしている。　また、アップロードのファイルサイズの上限は300Kｂである。　もちろんこれらの設定は、用途やサーバーの容量などを勘案して自由に設定することができる。
　ファイルをフォルダに保管するので、アップロードと、表示のswfを別々に切り離して使うことも可能で、サイトの写真の入れ替えも、同じフォルダに同じな名前のファイルをアップすればよく、これを、Web（ブラウザ）でできるようになる。

SAMPLE

ステージの準備

●480*200、背景色好みのステージ（12fps）を設定
●コンポーネントのScrollPnaeをライブラリーにD&Dしておく
●上に表示されているSAMPLEのように、input型のテキストフィールド（インスタンス名：fileName）、参照ボタン（select_btn）、アップロードボタン（submit_btn）、拡大写真ボタン（enlarge_btn）、メッセージ表示ダイナミックテキストフィールド（msgBox,複数行）を配置する

スクリプト（_root、FRAME1に記述）

System.useCodepage = true;
import flash.net.FileReference;
var max_size = 300*1024;
var listener:Object = new Object();
listener.onSelect = function(file:FileReference):Void {
  fileName.text = file.name;
  if (file.size<=max_size) {
    submit_btn.onRelease = function() {
      msgBox.text = "";
      destroyObject("imgPane");
      if (!file.upload("upload.php")) {
        msgBox.text = "アップロードエラー";
      }
      listener.onComplete = function(file:FileReference) {
        msgBox.text = "アップロード完了";
        showImg(file);
      };
    };
  } else {
    msgBox.text = "ファイルサイズが、\n300kbを超えています";
  }
};
listener.onCancel = function(file:FileReference):Void {
  msgBox.text = "キャンセルされました";
};
var fileDescription = "imagefile(*.jpg; *.gif; *.png)";
var fileExtension = "*.jpg; *.gif; *.png";
select_btn.onRelease = function() {
  var fileRef:FileReference = new FileReference();
  fileRef.addListener(listener);
  fileRef.browse([{description:fileDescription, extension:fileExtension}]);
};
function showImg(file):Void {
  imgPane = this.createClassObject(mx.containers.ScrollPane, "imgPane",   this.getNextHighestDepth());
  imgPane.setSize(125,125);
  imgPane._x = 70;
  imgPane._y = 70;
  imgPane.contentPath = "simages/s"+file.name;
  imgPane.setStyle("borderStyle","none");
  imgPane.setStyle("themeColor","white");
  enlarge_btn.onRelease = function() {
    getURL("images/L"+file.name, "_blank");
  };
}

FileReferenceクラスをインポート
アップロード画像のサイズの上限
（用途、サーバー規模によって設定)

参照で選ばれたファイル名

ScrollPaneの表示をキャンセル
phpにアップロードし、
phpの作動に問題があればエラー表示

phpでファイルが受け取られたら

showImg関数の呼び出し

ファイルサイズが過大のときメッセージ

参照ボタンが押されたら
FileReferenceインスタンスの作成

*.jpg; *.gif; *.pngに限って参照

ScrollPane（インスタンス名imgPane）表示

サイズ
位置

simages/sにあるサムネイルを表示
imgPaneの枠線削除

拡大ボタンが押されたら
元サイズの画像を別Windowで表示

ｐｈｐスクリプト（upload.php を文字コードSJISで保存、ただし、文字コードはサーバー設定による）

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>Flash/PHP Uploading Images</title>
</head>
<body>
<?php
mb_internal_encoding("SJIS");
//アップロード画像、サムネイルファイルの格納フォルダが無ければ作成
if(!is_dir("./images")) mkdir("./images", 0755);
if(!is_dir("./simages")) mkdir("./simages", 0755);
//保存ファイル数の制限を設定
$max_files = 10;
//アップロードファイルの名前の取得
$source = $_FILES['Filedata']['tmp_name'];
//アップロード画像の確認・ファイル名の確定
if (is_uploaded_file($source)) {
  $file = $_FILES['Filedata']['name'];
}
//画像の保存、サムネイル画像の作成と保存（画像タイプごとに分けて処理）
if ($file) {
  move_uploaded_file($source, "./images/".$file);
  rename("./images/".$file,"./images/L".$file);
  $imgfile = "./images/L".$file;
  $imgtype = exif_imagetype($imgfile);
  switch($imgtype) {
    case '1':
      $imgSource = imageCreateFromGif($imgfile);
      $dest = resizeImg($imgSource);
      $sfile = "./simages/s".$file;
      imageGif($dest,$sfile);
      break;
    case '2':
      $imgSource = imageCreateFromJpeg($imgfile);
      $dest = resizeImg($imgSource);
      $sfile = "./simages/s".$file;
      imageJpeg($dest,$sfile);
      break;
    case '3':
      $imgSource = imageCreateFromPng($imgfile);
      $dest = resizeImg($imgSource);
      $sfile = "./simages/s".$file;
      imagePng($dest,$sfile);
      break;
  }
}
//サムネイル作成関数
function resizeImg($imgSource) {
  $minX = 120;
  $minY = 120;
  $width = min((imageSx($imgSource) / imageSy($imgSource)*$minX), $minX);
  $height = min((imageSy($imgSource) / imageSx($imgSource)*$minY), $minY);
  $dest = imageCreateTrueColor($width,$height);
  imageCopyResampled($dest,$imgSource,0,0,0,0,$width,$height,imageSx($imgSource),imageSy($imgSource));
  return $dest;
  imagedestroy($source);
  imagedestroy($dest);
  imagedestroy($imgSource);
}
//過剰保存ファイルの削除（古いものから）
$dirs = './simages/';
$dir = './images/';
unlinkFiles( $dirs, $max_files);
unlinkFiles( $dir, $max_files);

function unlinkFiles($dir,$max_files) {
  $directory = opendir($dir);
  $files_arr = array();
  while ($f = readdir($directory)) {
    array_push($files_arr,array($dir.$f,filectime($dir.$f)));
  }
  usort($files_arr, 'sorter');
  if (count($files_arr) > $max_files) {
    $excessivefiles = array_splice($files_arr, 0, count($files_arr) - $max_files);
    for ($i = 0; $i < count($excessivefiles); $i++) {
      unlink($excessivefiles[$i][0]);
    }
  }
  closedir($directory);
}

function sorter($a, $b) {
  if ($a[1] == $b[1]) {
    return 0;
  } else {
    return ($a[1] < $b[1]) ? -1 : 1;

}
}
?>
</body></html>

注)　登録ファイル数を限定するためのphpスクリプトは、adobeの解説ページを参考にしました。
　　　なお、php.iniでextenionsの、mbstring、exif、gd2 を有効にしてください（ほとんどのサーバーでは有効になっていると思います)

HOME　　　お勉強総リスト