先に、応用編「画像のアップロード」でphpとの連携でサムネイル表示とそのリリースで拡大表示する方法を勉強したが、今回は、その応用として、画像付きドキュメント（文章）をブラウザの管理画面からアップロードし、サイトの画面を更新させるお勉強である。
いわゆるブログ感覚で、What's New 、自撮の写真紹介、アフィリエイトサイトの新商品紹介などなどに応用できるのではないかなと思っているが、もちろん完璧な仕上がりではないので、それぞれの用途に向けてバージョンアップが必要になるであろう。
ファイル構成は、
アップロード用として、
uploadDoc.html、uploadDoc.swf、画像プレビュー用：tmpimg.php、ドキュメント登録用：uploaddoc.php
表示用として、
finaldisplay.html、displayDoc.swf、finaldisplay.swf（displayDoc.swfをスクロールペイン内に表示させるためのもの）
なお、本サンプルではアップロード後の削除機能を付与していない。それほど難しいことではなさそうなので、いずれ考えるようにしたいが、とりあえずは、サーバーにできたdoc.logファイルからその項目を削除することで画面から削除可能である。
本ページはアップロード画面の作成で、サイト（更新）画面の作成は >>こちらに>> あります。 （別ウインドウで開きます） |
| SAMPLE |
| 管理（アップロード）画面 確認はできますが登録はできなようにしています。別画面にお試し用を設置しています。 |
|
| ステージなどの準備 |
●650*500のステージ（12fps）を設定（背景色、ステージサイズは目的に応じて任意でよい）
●上記サンプルの画面のようなレイアウトで、インプット用テキストフィールド、メッセージ表示用ダイナミックテキストフィールド
、ボタン類を以下のように配置する（少なくとも題名をインプットして確認ボタンをクリックすると全部見える）。
上から、（ ）内はインスタンス名
題目インプット用（titleBox）、本文インプット用（messageBox）、アップロードファイルインプット用（fileName）
メッセージ表示用ダイナミック（msgBox1）・・borderをfalseにしているのでfileNameの下に隠れている
参照ボタン（select_btn）、確認ボタン（confirm_btn）
題名確認表示用ダイナミック（Title）、本文確認表示用ダイナミック（Message）、メッセージ表示用（msgBox2）
登録ボタン（submit_btn）
●Title、Messageはhtmlレンダリング on にする
●コンポーネントウインドウからのライブラリーにScrollPane、Button（ボタンにコンポーネントを使う場合）をドラッグしておく。
＜ｈｔｍｌでswfファイルを挿入する時の注意＞
<param name="wmode" value="opaque" /> の行を削除した方が無難（input文表示不具合回避のため）
|
スクリプト（as2.0, _root、FRAME1に記述） |
System.useCodepage = true;
import flash.net.FileReference;
//アップロードファイルサイズの上限（kバイト）
var max_size = 500*1024;
//ファイル参照・選択とイメージファイルのphpへの送信とプレビュー
var listener:Object = new Object();
listener.onSelect = function(file:FileReference):Void {
imgFile = file.name;
fileName.text = imgFile;
if (file.size>max_size) {
msgBox.text = "ファイルサイズが、500kbを超えています";
}
//イメージファイルの仮登録・確認表示
confirm_btn.onRelease = function():Void {
msgBox1.text = "";
msgBox2.text = "よければ送信ボタンを。修正があれば上のボックスで修正してください。";
txt_confirmation();
destroyObject("imgPane");
if (fileName.text) {
if (!file.upload("tmpimg.php")) {
msgBox1.text = "アップロードエラー";
}
listener.onComplete = function(file:FileReference) {
msgBox1.text = "アップロード完了";
showImg(file);
};
}
};
};
listener.onCancel = function(file:FileReference):Void {
msgBox1.text = "キャンセルされました";
};
var fileDescription = "imagefile(*.jpg; *.gif; *.png)";
var fileExtension = "*.jpg; *.gif; *.png";
select_btn.onRelease = function():Void {
var fileRef:FileReference = new FileReference();
fileRef.addListener(listener);
fileRef.browse([{description:fileDescription, extension:fileExtension}]);
};
//画像ファイルが選択されなかったときに確認ボタンがリリースされたら
confirm_btn.onRelease = function():Void {
msgBox1.text = "";
msgBox2.text = "よければ送信ボタンを。修正があれば上のボックスで修正してください。";
txt_confirmation();
imgFile="null";
}
//登録ボタンリリースで、画像ファイル名、題名、内容文をphpに送信・受信
submit_btn.onRelease = function():Void {
msgBox2.text = "";
sdData = new LoadVars();
rvData = new LoadVars();
rvData.onLoad = function(success):Void {
if (success) {
if (rvData.val !== undefined) {
msgBox2.text = rvData.val;
} else {
diaryBox2.text = "undefined";
}
} else {
diaryBox2.text = "送受信エラー";
}
};
sdData.img_file = imgFile;
sdData.title_doc = titleTxt;
sdData.message_doc = messageTxt;
sdData.sendAndLoad("uploaddoc.php",rvData,"POST");
};
//サムネイル画像表示関数
function showImg(file):Void {
imgPane = this.createClassObject(mx.containers.ScrollPane, "imgPane", this.getNextHighestDepth());
imgPane.setSize(120,120);
imgPane._x = 30;
imgPane._y = 335;
imgPane.contentPath = "stmp_img/s"+file.name;
imgPane.setStyle("borderStyle","none");
imgPane.setStyle("themeColor","white");
}
//テキストの確認表示関数
function txt_confirmation():Void {
titleTxt = titleBox.text;
messageTxt = messageBox.text;
Title.htmlText = "<B>"+titleTxt+"</B>";
Message.htmlText = messageTxt;
} |
| tmpimg.php （サムネイル確認表示用） |
<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("./tmp_img")) mkdir("./tmp_img", 0755);
if(!is_dir("./stmp_img")) mkdir("./stmp_img", 0755);
//保存ファイル数の制限を設定
$max_files = 2;
//アップロードファイルの名前、サイズの取得
$source = $_FILES['Filedata']['tmp_name'];
//アップロード画像の保存
if (is_uploaded_file($source)) {
$file = $_FILES['Filedata']['name'];
}
//サムネイル画像の作成と保存（画像タイプごとに分けて処理）
if ($file) {
move_uploaded_file($source, "./tmp_img/".$file);
rename("./tmp_img/".$file,"./tmp_img/L".$file);
$imgfile = "./tmp_img/L".$file;
$imgtype = exif_imagetype($imgfile);
switch($imgtype) {
case '1':
$imgSource = imageCreateFromGif($imgfile);
$dest = resizeImg($imgSource);
$sfile = "./stmp_img/s".$file;
imageGif($dest,$sfile);
break;
case '2':
$imgSource = imageCreateFromJpeg($imgfile);
$dest = resizeImg($imgSource);
$sfile = "./stmp_img/s".$file;
imageJpeg($dest,$sfile);
break;
case '3':
$imgSource = imageCreateFromPng($imgfile);
$dest = resizeImg($imgSource);
$sfile = "./stmp_img/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 = './stmp_img/';
$dir = './tmp_img/';
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> |
| uploaddoc.php （ドキュメント登録用） |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE>document_upload</TITLE>
</HEAD>
<BODY>
<?php
mb_internal_encoding("SJIS");
$logfile = "doc.log";
$maxcontents = 6;
$max_imgfiles = 10;
$image = $_POST["img_file"];
$title = $_POST["title_doc"];
$messg = $_POST["message_doc"];
$messg = stripslashes($messg);
$finished = '登録が完了しました';
echo "&val=$finished&";
$contents = file_get_contents($logfile);
$handle = fopen($logfile, 'w+');
flock($handle,LOCK_EX);
$contents = "$image|$title|$messg\n".$contents;
fputs($handle, $contents);
fclose($handle);
//アップロード画像、サムネイルファイルの格納フォルダが無ければ作成
if(!is_dir("./images")) mkdir("./images", 0755);
if(!is_dir("./simages")) mkdir("./simages", 0755);
//画像データをtmp_img,stmp_imgフォルダからimages,simagesフォルダに移動
rename("./tmp_img/L".$image,"./images/L".$image);
rename("./stmp_img/s".$image,"./simages/s".$image);
//データ要素数がmaxcontentsを越えたら、古いデータを一つ削除する
$fa = file($logfile);
if(count($fa)>$maxcontents) {
for($i=0; $i<(count($fa)-$maxcontents); $i++) {
unset($fa[$maxcontents+$i]);
}
$fl = implode("",$fa);
$fp = fopen($logfile, 'w');
flock($fp,LOCK_EX);
fputs($fp,$fl);
fclose($fp);
}
//過剰保存画像ファイルの削除（古いものから）
$dirs = './simages/';
$dir = './images/';
unlinkFiles( $dirs, $max_imgfiles);
unlinkFiles( $dir, $max_imgfiles);
function unlinkFiles($dir,$max_imgfiles) {
$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_imgfiles) {
$excessivefiles = array_splice($files_arr, 0, count($files_arr) - $max_imgfiles);
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> |
|
|
|
| |
| HOME お勉強総リスト |
