Flexでファイルのアップやphpとの通信
phpとの通信を前々からやってみたかったのでやってみました。
画像をアップすると画像が追加されます。
今は単純に画像をフォルダに置くだけなので今後はデーターベースに格納して、ユーザーごとに画像の管理ができるようにしてみようと思います。
前問題だった画像のドラッグが後輩の助けによってできました。
今度は重なりの順番を変更したいです。
http://moeten.info/hatena/20071114_fileup/bin/main.html
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html" creationComplete="get_image()"> <mx:Style> .my{ borderColor: #b7babc; borderThickness: 2; dropShadowEnabled: true; backgroundColor:#ffffff; borderColor:#ff80ff; cornerRadius:3; themeColor:#ff80ff; borderStyle:solid; } </mx:Style> <mx:Script> <![CDATA[ import mx.effects.Resize; import mx.events.DragEvent; import mx.core.DragSource; import mx.core.UIComponent; import mx.core.IFlexDisplayObject; import mx.managers.DragManager; import mx.containers.Canvas; import mx.controls.Image; import mx.effects.Rotate; import mx.effects.Move; import mx.effects.Effect; public var myXML:XML; public var myLoader:URLLoader; public function initApp():void{ //ファイルタイプの絞りこみ var imageTypes:FileFilter = new FileFilter("Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg; *.jpeg; *.gif; *.png"); var textTypes:FileFilter = new FileFilter("Text Files (*.txt, *.rtf)", "*.txt; *.rtf"); var allTypes:Array = new Array(imageTypes, textTypes); //ファイル選択 var fileRef:FileReference = new FileReference(); fileRef.browse(allTypes); fileRef.addEventListener(Event.SELECT, selectHandler); fileRef.addEventListener(Event.COMPLETE, completeHandler); try{ var success:Boolean = fileRef.browse(); }catch (error:Error){ myLog.text ="Unable to browse for files."; } function selectHandler(event:Event):void{ //画像をＰＯＳＴで送る場所 var request:URLRequest = new URLRequest("http://moeten.info/hatena/20071114_fileup/index.php") try{ fileRef.upload(request); }catch (error:Error){ myLog.text ="Unable to upload file."; } } function completeHandler(event:Event):void{ myLog.text = "uploaded"; //アップロードできたのでファイルゲット。 get_image(); } } //カラーピッカーが設定されたら呼び出される関数 private function get_image():void{ myXML = new XML(); //ＸＭＬの取得 var XML_URL:String = "http://moeten.info/hatena/20071114_fileup/index.php?type=xml&nocach="+Math.round( Math.random()*200 ); var myXMLURL:URLRequest = new URLRequest(XML_URL); myLoader = new URLLoader(myXMLURL); myLoader.addEventListener("complete", xmlLoaded); } //XMLローダー public var i:int = 0; public function xmlLoaded(evtObj:Event):void { myXML = XML(myLoader.data); for( i = 0 ; i < myXML.item.length(); i ++ ){ add_image( myXML.item[i].img ); myLog.text += "" + myXML.item[i].img + "\n"; } } public var rotate_a:Array = new Array(); public function add_image(url:String):void{ //キャンバスの作成 var mycanvas:Canvas = new Canvas(); mycanvas.width = 200; mycanvas.height = 200; mycanvas.horizontalScrollPolicy = "off"; mycanvas.verticalScrollPolicy = "off"; mycanvas.x = Math.round( Math.random()*200 ); mycanvas.y = Math.round( Math.random()*200 ); mycanvas.styleName = "my"; //画像の作成 var image:Image = new Image(); image.source = url; image.width = 240; image.height = 240; image.enabled = false; //画像にもイベントリスナー image.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown ,true); image.addEventListener(MouseEvent.MOUSE_UP,onMouseUp, true); mycanvas.alpha = 0.5; //ステージにアッド mycanvas.addChild(image); //キャンバスにもイベントリスナー mycanvas.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown); mycanvas.addEventListener(MouseEvent.MOUSE_UP,onMouseUp); this.addChild(mycanvas); //ムーブ var move:Move = new Move(); move.target = mycanvas; move.yTo = Math.round( Math.random()*200 )+100; move.xTo = Math.round( Math.random()*500 )+100; move.duration = 1000; move.play(); //回転 var rotate:Rotate = new Rotate(); rotate.originX = -50; rotate.originY = -50; rotate.duration = 1000; rotate.target = mycanvas; rotate.angleFrom = Math.round( Math.random()*100 ); var angleTo:int = Math.round( Math.random()*100 ); rotate.angleTo = angleTo; rotate_a[i] = angleTo; rotate.play(); } //ドラッグ関係（未だ勉強中 public function onMouseDown(event:MouseEvent):void { event.currentTarget.alpha = 1.0; event.currentTarget.startDrag(); var resize:Resize = new Resize(); resize.target = event.currentTarget; resize.widthFrom = 150; resize.widthTo = 200; resize.heightFrom = 150; resize.heightTo = 200; resize.duration = 100; resize.play(); //回転 var rotate:Rotate = new Rotate(); rotate.duration = 10; rotate.target = event.currentTarget; rotate.play(); //parent.setChildIndex( this , parent.numChildren - 1); } //ドラッグ中の更新 public function onMouseMove(event:MouseEvent):void { } //ドラッグ終了 public function onMouseUp(event:MouseEvent):void { event.currentTarget.stopDrag(); var resize:Resize = new Resize(); resize.target = event.currentTarget; resize.widthFrom = 200; resize.widthTo = 150; resize.heightFrom = 200; resize.heightTo = 150; resize.play(); event.currentTarget.alpha = 0.5; } ]]> </mx:Script> <mx:TextArea x="80" y="103" id="myLog" width="242" height="157" /> <mx:Button x="80" y="45" label="ファイルアップ！" click="initApp()"/> </mx:Application>
Flex部分は画像の送信と表示となっています。
その画像の受けざらをphpで作成します。
今回は単純に画像をゲットして、特定のフォルダに入れています。
また、type=xmlとすることでフォルダのリストをxmlで表示します。
これをつかってFlex側で画像を表示します。
<?php if( $_GET['type'] == "" ){ //送られてきたデーターをゲットして格納する。 $file = date('y-m-d-h-s.jpg'); move_uploaded_file($_FILES['Filedata']['tmp_name'], "./images/{$file}"); }elseif( $_GET['type'] == "xml" ){ //ディレクトリを読んでそれをＸＭＬで出力する。 $directory = opendir('./images/'); $files = array(); header ("Content-Type: text/xml; charset=UTF-8"); $xml = <<<EOD <result> EOD; while ($file = readdir($directory)){ if( $file != ".." && $file != "." ){ $file; $xml .= <<<EOD <item> <img>http://moeten.info/hatena/20071114_fileup/images/{$file}</img> </item> EOD; } } $xml .= <<<EOD </result> EOD; echo mb_convert_encoding( $xml , "UTF-8" , "SJIS" ); exit; } exit; ?>
