Asial Blog

Recruit! Asialで一緒に働きませんか?

Flash内で作成した複数画像を同時にアップロードする

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
Flash
Flex
こんにちは、中川です。

つい最近、「Flashで作成した画像(jpg)をサーバ側にアップロードする」ということが必要になることがありました。
普通に画像1個であれば簡単なのですが、今回は複数同時にアップしたいという状況でした。

連続してのアップロードや、zip圧縮、画像を結合してなど様々な方法を教えていただいたりしたのですが、サーバ側の処理をいかに通常処理、かつ楽するかの部分でいろいろ探したところ、
「HTTPPostBinary」というas3のライブラリで実現することができそうですので、ご紹介したいと思います。
こちらを利用するとAS側のプログラムも特に面倒ということもなさそうです。

それでは、早速試してみましょう。

HTTPPostBinary class connects your flash program to general webservice」から「HTTPPostBinary.as」をダウンロードしてFlexプロジェクト内に配置します。

で、実際に使いかたも、上記ブログ記事のとおり、
  1. var loader:URLLoader = new URLLoader();
  2. var request:URLRequest = new URLRequest("http://www.flickr.com/tools/uploader_go.gne");
  3. var httpdata:HTTPPostBinary = new HTTPPostBinary();
  4. httpdata.addBinary("photo", jpegDat, "image/jpeg", "snap.jpg");
  5. request.contentType = httpdata.contentType;
  6. request.method = httpdata.method;
  7. request.data = httpdata.encodeData();
  8. loader.load(request);

このように簡単に利用できます。

以下、ボタンを押したら2種類のサイズの画面イメージをサーバにPOSTするサンプルです。
今回のサンプルの構成は以下のようになっています。



UploadFlex.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3.   <mx:Script>
  4.     <![CDATA[
  5.  
  6.       import mx.graphics.codec.JPEGEncoder;
  7.       import ym.net.HTTPPostBinary;
  8.       
  9.       public function upload():void { 
  10.         
  11.         //1個目の画像
  12.         var bmd:BitmapData = new BitmapData(100, 200, false, 0xFFFFFF);
  13.         bmd.draw(this);
  14.         var encoder1:JPEGEncoder = new JPEGEncoder(100);
  15.         var bytes1:ByteArray = encoder1.encode(bmd);
  16.         
  17.         //2個目の画像
  18.         var bmd2:BitmapData = new BitmapData(50, 50, false, 0xFFFFFF);
  19.         bmd2.draw(this);
  20.         var encoder2:JPEGEncoder = new JPEGEncoder(100);
  21.         var bytes2:ByteArray = encoder2.encode(bmd2);
  22.         
  23.         var loader:URLLoader = new URLLoader();
  24.         var request:URLRequest = new URLRequest("/sample/post.php");
  25.         var httpdata:HTTPPostBinary = new HTTPPostBinary();
  26.         
  27.         //画像を添付
  28.         httpdata.addBinary("img1", bytes1, "image/jpeg", "img1.jpg");
  29.         httpdata.addBinary("img2", bytes2, "image/jpeg", "img2.jpg");
  30.         
  31.         //テキストデータも同時に送信してみる
  32.         httpdata.addString("hoge", "test string");        
  33.         
  34.         request.contentType = httpdata.contentType;
  35.         request.method = httpdata.method;
  36.         request.data = httpdata.encodeData();
  37.         
  38.         //送信
  39.         loader.load(request);
  40.       
  41.       }
  42.       
  43.     ]]>
  44.   </mx:Script>
  45.   <mx:Button click="upload()" label="upload" />
  46. </mx:Application>

手元のFlexBuilderでの作成が手軽だったので、Flexプロジェクトとして作成していますが、
通常のASプロジェクトでもHTTPPostBinary自体の動作には影響なく動くでしょう。

そして、受け取る側のphpコードはおなじみの$_POST, $_FILESで大丈夫です。

post.php
  1. <?php
  2.  
  3. /*
  4. ■UploadFlex.swfから以下のようなデータがPOSTされてくる
  5.  
  6. $_POST = Array
  7. (
  8.     [hoge] => test string
  9. )
  10.  
  11. $_FILES = Array
  12. (
  13.     [img1] => Array
  14.         (
  15.             [name] => img1.jpg
  16.             [type] => image/jpeg
  17.             [tmp_name] => /tmp/phpD7lTa9
  18.             [error] => 0
  19.             [size] => 4873
  20.         )
  21.  
  22.     [img2] => Array
  23.         (
  24.             [name] => img2.jpg
  25.             [type] => image/jpeg
  26.             [tmp_name] => /tmp/php7V23q5
  27.             [error] => 0
  28.             [size] => 2733
  29.         )
  30.  
  31. )
  32.  
  33. */
  34.  
  35. error_log(print_r($_POST, true), 3, '/tmp/hoge.txt');
  36. error_log(print_r($_FILES, true), 3, '/tmp/hoge.txt');
  37.  
  38. //uploadディレクトリにPOSTされたファイルを保存
  39. foreach ($_FILES as $key => $file) {
  40.     if ($file['error'] == UPLOAD_ERR_OK) {
  41.         $tmp_name = $file["tmp_name"];
  42.         $name = $file["name"];
  43.         move_uploaded_file($tmp_name, "./upload/".$name);
  44.     }
  45. }

実際にアップロードされた画像ファイルが以下の2個となります。
  

※ボタンだけを配置したFlashのキャプチャをしているため、見た目はアレですが、、、ちゃんと、指定した2種類のサイズで切り抜いて作成されています。


まだ、ちゃんとした検証はしてないですが、最新のFlash10のバージョンでは、手元のIE6, IE7, IE8, Firefox3.5では複数画像もPOSTデータも正常にサーバ側で受け取ることができました。