ファイルのアップロード

  1つのファイル



↓最新ソースと、IFRAME + PHP 実装サンプル
http://lightbox.on.coocan.jp/download/flex2_fileUpload.lzh

↓にあるサンプルを解りやすく改造しました
http://www.adobe.com/jp/support/flex/ts/documents/5534a12f.htm

  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	creationComplete="initApp()"
>
<mx:Script>
	<![CDATA[
		import mx.controls.Alert;
		import mx.utils.ObjectUtil;
		import flash.events.*;
		import flash.net.*;

		private var fr:FileReference;
	
		private function initApp():void {
			fr = new FileReference();

			// IO エラー
			fr.addEventListener(IOErrorEvent.IO_ERROR, systemError);
			// セキュリティエラー
			fr.addEventListener(SecurityErrorEvent.SECURITY_ERROR, dummy);

			// 準備完了
			fr.addEventListener(Event.SELECT, uploadReady);
			// 処理終了
			fr.addEventListener(Event.COMPLETE, completeUpload);
			// サーバーよりデータ受信
			fr.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, receiveData);
			// 処理中
			fr.addEventListener(ProgressEvent.PROGRESS, progressUpload);

			// キャンセル
			fr.addEventListener(Event.CANCEL, cancelUpload);

//			// アップロード処理が開始
//			fr.addEventListener(Event.OPEN, dummy);
		}

		// *************************************************
		// 準備完了
		// *************************************************
		private function uploadReady(event:Event):void{

			// アップロードボタンを使用可能
			btn_upload.enabled = true;
			// ファイルのパスをセット
			filename.text = fr.name;
			// プログレスバーの初期化
			progressBar.setProgress(0, 100);
			progressBar.label = "準備完了";			
		}
	
		// *************************************************
		// 処理中
		// *************************************************
		private function progressUpload(event:ProgressEvent):void {

			// ダウンロード済みと最終データ量から進行状況をセット
			progressBar.setProgress(
				event.bytesLoaded,
				event.bytesTotal
			);

			// ラベルの表示
			if ( event.bytesTotal != 0 ) {
				progressBar.label =
					 "Loading " + 
					int((event.bytesLoaded/event.bytesTotal)*100) +
					"%";
			}

		}
	
		// *************************************************
		// 処理終了
		// *************************************************
		private function completeUpload(event:Event):void {

			progressBar.label = "アップロード完了";

			// ボタンを使用不可
			btn_upload.enabled = false;
			btn_cancel.enabled = false;
		}
		
		// *************************************************
		// サーバーよりデータ受信
		// *************************************************
		private function receiveData(event:DataEvent):void {

			// サーバーデータを表示
			r_message.text = event.data;
		}


		// *************************************************
		// 処理開始
		// *************************************************
		private function uploadStart():void {

			progressBar.label = "初期処理実行中";		

			// 追加パラメータ
			var param:String = "MyUploadFile";

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

			req.method = URLRequestMethod.POST;
			req.data = "MAX_FILE_SIZE=30000000&test=lightbox";

			// テストアップロード無し
			fr.upload(req, param, false); 

			// キャンセルボタン使用可能
			btn_cancel.enabled = true;
		}
				
		// *************************************************
		// IO エラー
		// *************************************************
		private function systemError(event:IOErrorEvent):void{
			Alert.show("IOError:" + event.text);
		}

		// *************************************************
		// ファイル選択のキャンセル
		// *************************************************
		private function cancelUpload(event:Event):void {

		}

		// *************************************************
		// ダミー
		// *************************************************
		private function dummy(event:Event):void {
			Alert.show(mx.utils.ObjectUtil.toString(event));
		}
	]]>
</mx:Script>
	
	<mx:Panel title="ファイルのアップロード" width="100%" height="100%" >
		<mx:Form>

			<!-- *********************************** -->
			<!-- アップロード対象ファイルのパス -->
			<!-- *********************************** -->
			<mx:FormItem label="選択されたファイル:">
				<mx:Label id="filename"/>
			</mx:FormItem>
			
			<mx:FormItem direction="horizontal" width="100%">

				<!-- *********************************** -->
				<!-- ファイル選択 -->
				<!-- *********************************** -->
				<mx:Button
					width="80"
					label="参照"
					click="fr.browse();"
				/>

				<!-- *********************************** -->
				<!-- 実行 -->
				<!-- *********************************** -->
				<mx:Button
					label="アップロード開始"
					id="btn_upload"
					enabled="false"
					click="uploadStart();"
				/>

				<!-- *********************************** -->
				<!-- 実行中のキャンセル -->
				<!-- *********************************** -->
				<mx:Button
					width="80"
					label="Cancel"
					id="btn_cancel"
					enabled="false"
					click="
						fr.cancel();
						btn_upload.enabled = false;
						btn_cancel.enabled = false;
					"
				/>
			</mx:FormItem>
			
			<!-- *********************************** -->
			<!-- 横線 -->
			<!-- *********************************** -->
			<mx:HRule width="100%" tabEnabled="false"/>
			
			<!-- *********************************** -->
			<!-- 実行中のプログレスバー -->
			<!-- *********************************** -->
			<mx:FormItem label="Progress:">
				<mx:ProgressBar id="progressBar" mode="manual" />
			</mx:FormItem>
			
			<mx:FormItem label="サーバーからのメッセージ">
				<mx:TextArea
					id="r_message"
					width="100%"
					height="100"
					editable="false"
			/>
			</mx:FormItem>

		</mx:Form>
		
	</mx:Panel>	
</mx:Application>
  

PHP側( メッセージを返すので、UTF-8N で記述します )
  
<?
$upload = "file/{$_FILES['MyUploadFile']['name']}";

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

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

PHP が受信する内容は以下のようになります

上から、$_GET, $_POST, $_FILES です。

$_GET は、upload.php?param=get より。

$_POST の Filename と Upload は、flex2 がセットしています

  
Array
(
    [param] => get
)
Array
(
    [Filename] => flex2_devguide.zip
    [MAX_FILE_SIZE] => 30000000
    [test] => lightbox
    [Upload] => Submit Query
)
Array
(
    [MyUploadFile] => Array
        (
            [name] => flex2_devguide.zip
            [type] => application/octet-stream
            [tmp_name] => C:\WINDOWS\Temp\php46.tmp
            [error] => 0
            [size] => 6612524
        )

)
  



  アップロード実行デモ( 実際のアップロードはできません )






  複数ファイルのアップロード

それぞれのアップロード処理を同期していません。
( キャンセル処理も実装していません )
実際にはいったん DataGrid 等にデータを保存してから再度実行するほうが良いでしょう。
( 一つのアップロードが終了してから次のアップロードをリレーさせる )

  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	creationComplete="initApp()"
>
<mx:Script>
	<![CDATA[
		import mx.controls.Alert;
		import mx.utils.ObjectUtil;
		import flash.events.*;
		import flash.net.*;

		private var frs:FileReferenceList;
	
		private function initApp():void {

			frs = new FileReferenceList();

			// 準備完了
			frs.addEventListener(Event.SELECT, uploadStart);

			// キャンセル
			frs.addEventListener(Event.CANCEL, cancelUpload);

		}

		// *************************************************
		// 処理中
		// *************************************************
		private function progressUpload(event:ProgressEvent):void {

			// ダウンロード済みと最終データ量から進行状況をセット
			progressBar.setProgress(
				event.bytesLoaded,
				event.bytesTotal
			);

			// ラベルの表示
			if ( event.bytesTotal != 0 ) {
				progressBar.label =
					 "Loading " + 
					int((event.bytesLoaded/event.bytesTotal)*100) +
					"%";
			}

		}
	
		// *************************************************
		// 処理終了
		// *************************************************
		private function completeUpload(event:Event):void {

			progressBar.label = "アップロード完了";

		}
		
		// *************************************************
		// サーバーよりデータ受信
		// *************************************************
		private function receiveData(event:DataEvent):void {

			// サーバーデータを表示
			r_message.text = event.data;
		}


		// *************************************************
		// 処理開始
		// *************************************************
		private function uploadStart(event:Event):void {

			var i:String;

			progressBar.label = "初期処理実行中";		

			for (i in event.target.fileList) {

				// プログレスバーの初期化
				progressBar.setProgress(0, 100);
				progressBar.label = "準備完了";			

				// 追加パラメータ
				var param:String = "MyUploadFile";
		
				var req:URLRequest = new URLRequest("upload.php?param=get");
		
				req.method = URLRequestMethod.POST;
				req.data = "MAX_FILE_SIZE=30000000&test=lightbox";
	
				// 処理終了
				event.target.fileList[i].addEventListener(
					Event.COMPLETE, completeUpload);
				// サーバーよりデータ受信
				event.target.fileList[i].addEventListener(
					DataEvent.UPLOAD_COMPLETE_DATA, receiveData);
				// 処理中
				event.target.fileList[i].addEventListener(
					ProgressEvent.PROGRESS, progressUpload);

				// IO エラー
				event.target.fileList[i].addEventListener(
					IOErrorEvent.IO_ERROR, systemError);
				// セキュリティエラー
				event.target.fileList[i].addEventListener(
					SecurityErrorEvent.SECURITY_ERROR, dummy);
	
				// ファイルのパスをセット
				filename.text = event.target.fileList[i].name;

				event.target.fileList[i].upload(req, param, false);
			}

		}
				
		// *************************************************
		// IO エラー
		// *************************************************
		private function systemError(event:IOErrorEvent):void{
			Alert.show("IOError:" + event.text);
		}

		// *************************************************
		// ファイル選択のキャンセル
		// *************************************************
		private function cancelUpload(event:Event):void {

		}

		// *************************************************
		// ダミー
		// *************************************************
		private function dummy(event:Event):void {
			Alert.show(mx.utils.ObjectUtil.toString(event));
		}
	]]>
</mx:Script>
	
	<mx:Panel title="ファイルのアップロード" width="100%" height="100%" >
		<mx:Form>

			<!-- *********************************** -->
			<!-- アップロード対象ファイルのパス -->
			<!-- *********************************** -->
			<mx:FormItem label="選択されたファイル:">
				<mx:Label id="filename"/>
			</mx:FormItem>
			
			<mx:FormItem direction="horizontal" width="100%">

				<!-- *********************************** -->
				<!-- ファイル選択 -->
				<!-- *********************************** -->
				<mx:Button
					width="80"
					label="参照"
					click="frs.browse();"
				/>

			</mx:FormItem>
			
			<!-- *********************************** -->
			<!-- 横線 -->
			<!-- *********************************** -->
			<mx:HRule width="100%" tabEnabled="false"/>
			
			<!-- *********************************** -->
			<!-- 実行中のプログレスバー -->
			<!-- *********************************** -->
			<mx:FormItem label="Progress:">
				<mx:ProgressBar id="progressBar" mode="manual" />
			</mx:FormItem>
			
			<mx:FormItem label="サーバーからのメッセージ">
				<mx:TextArea
					id="r_message"
					width="100%"
					height="100"
					editable="false"
			/>
			</mx:FormItem>

		</mx:Form>
		
	</mx:Panel>	
</mx:Application>
  



  複数ファイルのアップロード実行デモ( 実際のアップロードはできません )










  infoboard   管理者用   
このエントリーをはてなブックマークに追加




フリーフォントWEBサービス
フリーフォントで簡単ロゴ作成
アイコン・はんこ画像作成
フリーフォントで横書きロゴ作成
フリーフォントで縦書きロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し素材作成
フリーフォントで PDF 作成
デュアルフォント
書体見本
フリーフォント配布サイト
キーボード画像作成
フリーフォント ギャラリー
イラストACよりフリーダウンロード
UTF-8文字Tool
SQLの窓WEBサービス
リアルタイムHTML
テキスト変換
ストリートビューとMAPのコード
SyntaxHighlighter
Shadowbox 埋め込みコード作成

SQLの窓フリーソフト
SQLの窓 Build C++
販売管理B
「送る」に入れる簡易ダンプ
WMI Query
コンピュータアイコンメニュー
ドメイン内検索

素材
足成
Image * After
ぱくたそ
イラストAC
イラスト素材サイト

一般WEBツールリンク
WEB アーカイブ
疑わしいファイルや URL を分析する
HTML整形ツール
JSONLint
ttf to woff converter
Run Code
Twitter Card validator
Google URL Shortener
C#<->VB.NET

SQLの窓
logical　error
GINPRO
WAHA land
職人的フリーソフトの使い方
WEB 職人
ソース掲示板

フリーソフト
7-Zip
FileZilla
PrimoPDF(英語版)
GifCam
GIMP Portable
Classic Shell

JSライブラリ
jQuery
Lightbox
Shadowbox.js
The Google Hosted Libraries
cdnjs
Three.js