SQLの窓

2011年06月13日


Flex4 : ファイルのアップロード( バージョン1 )

Flex4 による最も簡単な1ファイルのアップロードです。

プログレスバーの処理は実装していません。方法としては、Flex 内部の専用
コントロールを使う方法と、外部の JavaScript を呼び出して DIV で表現
する方法または、canvas で表現する方法があります。いずれにしても、その
場合は、Flex 内で fr.addEventListener(ProgressEvent.PROGRESS, progressUpload);
を実行して、進捗処理を実装する必要があります。また、Flex では、複数選
択による、複数ファイルの一括アップロードも可能です
( progressUpload は適当な関数名です )


<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	xmlns:s="library://ns.adobe.com/flex/spark"
	initialize="initData()"
	usePreloader="false"
>
<!--
***************************************************
 Flex4 における 絶対位置指定
*********************************************** -->
<s:layout>
	<s:BasicLayout />
</s:layout>

<!--
***************************************************
 現在のクラスの非デフォルト、非ビジュアルプロパ
 ティ を宣言します。例えば、効果、バリデーター、
 およびフォ ーマッターを定義します。
*********************************************** -->
<fx:Declarations>
</fx:Declarations>

<fx:Script>
<![CDATA[

	import mx.formatters.*;

	// HTTPService のイベント用
//	import mx.rpc.events.*;
	// Alert 用
	import mx.controls.*;

	private var fr:FileReference;

	// *********************************************************
	// ログ表示
	// *********************************************************
	private function log(data:Object):void {

		// 日付編集用
		var fmt:DateFormatter = new DateFormatter();

		fmt.formatString = "YYYY/MM/DD HH:NN:SS";
		var logdt:String = fmt.format( new Date );

		// JavaScript の呼び出し
		ExternalInterface.call(
			"console.log", logdt,
			" "+data
		);

	}

	// *********************************************************
	// アプリケーションの初期化
	// *********************************************************
	private function initData():void {

		// メッセージ
		log("initData() が実行されました" );

		Security.allowDomain("*");

		fr = new FileReference();

		// IO エラー
		fr.addEventListener(IOErrorEvent.IO_ERROR, 
			function (event:IOErrorEvent):void {
				Alert.show("IOError:" + event.text );
			}
		);

		// キャンセル
		fr.addEventListener(Event.CANCEL, 
			function (event:Event):void {
				Alert.show( "ファイル選択をキャンセルしました" );
			}
		);

		// ファイルが選択された
		fr.addEventListener(Event.SELECT,
			function (event:Event):void {

				var req:URLRequest = new URLRequest("upload.php");

				req.method = URLRequestMethod.POST;
				req.data = "MAX_FILE_SIZE=30000000";

				// テストアップロード無し
				// 二つ目の引数は、ファイルのフィールド名
				fr.upload(req, "MyUploadFile", false); 

			}
		);

		// アップロード処理を開始
		fr.addEventListener(Event.OPEN,
			function (event:Event):void {
				// ボタンを使用不可
				file_button.enabled = false;
			}
		);

		// 処理終了
		fr.addEventListener(Event.COMPLETE, 
			function (event:Event):void {
				// ボタンを使用可
				file_button.enabled = true;
			}
		);

		// サーバーよりデータ受信
		fr.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,
			function (event:DataEvent):void {
				Alert.show( event.data );
			}
		);

	}

	// *********************************************************
	// ファイル参照ダイアログを開く
	// *********************************************************
	private function selectFile():void {

		try {
			fr.browse();
		}
		catch (e:Error) {
			log(e);
		}

	}

]]>
</fx:Script>

<!--
***************************************************
 Flex4 における 絶対位置指定の画面定義
*********************************************** -->

<s:Button 
	id="file_button"
	x = "10" y="10"
	width="150"
	label="ファイル選択"
	click="selectFile();"
/>

</s:Application>

実際のアップロードの受け取り側は、PHP で行っているので、PHP の
仕様にあわせた送信処理を行っています
<?
// *********************************************************
// セッションの開始
// *********************************************************
session_start();
// *********************************************************
// HTTP ヘッダ
// *********************************************************
header('Content-type: text/html; charset=UTF-8');
header( "pragma: no-cache" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "Cache-control: no-cache" );

foreach( $_GET as $Key => $Value ) {
	$_POST[$Key] = $_GET[$Key];
}
foreach( $_POST as $Key => $Value ) {
	$_POST[$Key] = str_replace("\\'", "'", $_POST[$Key] );
	$_POST[$Key] = str_replace("\\\"", "\"", $_POST[$Key] );
}

mb_language( "ja" );
mb_internal_encoding("utf-8");

// ファイル名が UTF-8 なので、SHIFT_JIS で保存したい場合は
// 変換が必要になります
$_FILES['MyUploadFile']['name'] = mb_convert_encoding(
	 $_FILES['MyUploadFile']['name'], "shift_jis", "utf-8" 
);

$upload = "file/{$_FILES['MyUploadFile']['name']}";

$ret = move_uploaded_file(
	$_FILES['MyUploadFile']['tmp_name'], $upload
);

if ( $ret ) {
	print "アップロードは正常終了しました";
}
else {
	print "アップロードは異常終了しました";
}

?>

Windows 環境で日本語のファイル名を持つファイルをアップロードする
場合は、Flex 内部で UTF-8 になるので PHP 側で SHIFT_JISに戻す必
要があります


【Flexの最新記事】
posted by lightbox at 2011-06-13 22:51 | Flex | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり