用AS3上傳圖片

前一篇文章討論到要怎麼擷取webcam的照片，但是照好的相片好像最常的應用是丟到server上吧。但是在AS3提共的FileReferene這個class只能提供讓使用者選檔案，而不能直接上傳我們擷取的bitmap。

好在google中找到不錯的文章(how to impress your friends by taking an image snapshot of a flash movie and automatically uploading the jpg to a server in three easy steps)。作者寫了一個Helper來達到這個需求。

首先你要把它的這個Helper Class抓下來，放在你的project當中。再來因為我們上傳可能需要encode成JPEG，所以我們需要用到as3corelib裡面的JPGEncoder轉成ByteArray。最後，你要在server端寫一個php或是server-side的程式去接你上傳的檔案。

以下是我的flex程式

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="800" minHeight="600">


 <fx:Script>
  <![CDATA[
   import com.adobe.images.JPGEncoder;
   
   import mx.controls.Alert;
   
   private var bitmapData:BitmapData = new BitmapData(640, 480); // the current capture data
   private var encoder:JPGEncoder = new JPGEncoder(80);
   [Bindable] private var isCapture:Boolean = false;
   
   public static const PATH:String = "http://your_url/";
   public static const FILE:String = "my.jpg";
   
   
   private function videoDisplay_creationComplete():void {
    var camera:Camera = Camera.getCamera();
    if (camera) {
     camera.setQuality(0, 100);
     videoDisplay.attachCamera(camera);
    } else {
     Alert.show("You don't seem to have a camera.");
    }
   }
   
   private function capture(): void {        
    var bitmap:Bitmap = new Bitmap(bitmapData);
    
    bitmapData.draw(videoDisplay);
    bitmap new Bitmap(bitmapData);
    
    while(panel.rawChildren.numChildren > 0)
    {
     panel.rawChildren.removeChildAt(0);
    }
    panel.rawChildren.addChild(bitmap);
    isCapture = true;
   }
   
   private function update(): void {
    var byteArray:ByteArray = encoder.encode(bitmapData);
    var request:URLRequest  = new URLRequest();
    var loader:URLLoader = new URLLoader();
    var parameters:Object = new Object();
    
    request.url     = PATH;
    request.contentType  = 'multipart/form-data; boundary=' + UploadPostHelper.getBoundary();
    request.method    = URLRequestMethod.POST;
    request.data    = UploadPostHelper.getPostData(FILE, byteArray, parameters);
    request.requestHeaders.push( new URLRequestHeader('Cache-Control', 'no-cache'));
    
    loader = new URLLoader();
    loader.dataFormat = URLLoaderDataFormat.BINARY;
    loader.addEventListener(Event.COMPLETE, onComplete);
    loader.addEventListener(IOErrorEvent.IO_ERROR, onError);
    loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onError);
    loader.load(request);
   }
   
   private function onComplete(event:Event): void
   {
    var loader:URLLoader = event.target as URLLoader;      
    Alert.show("complete" + loader.data);
   }
   
   private function onError(event:Event): void
   {
    Alert.show("error");
   }
   
  ]]>
 </fx:Script>
 
 <mx:VideoDisplay id="videoDisplay"
      creationComplete="videoDisplay_creationComplete();"
      width="640"
      height="480" /> 
 
 <mx:Panel id="panel" width="640" height="480"  x="680" y="0"/>
 <s:Button x="10" y="548" label="capture" click="capture()"/>
 <s:Button x="100" y="548" label="update" click="update()" enabled="{isCapture==true}"/>
</s:Application>

再來就是接收端php的程式

<?php
if ((($_FILES["file"]["type"] == "image/gif")
   || ($_FILES["file"]["type"] == "image/jpeg")
   || ($_FILES["file"]["type"] == "image/pjpeg"))
   && ($_FILES["file"]["size"] < 2000000))
   {
      if ($_FILES["file"]["error"] > 0)
    {
      echo "Return Code: " . $_FILES["file"]["error"] . "<br />";
    }
   else
    {
      echo "Upload: " . $_FILES["file"]["name"] . "<br />";
      echo "Type: " . $_FILES["file"]["type"] . "<br />";
      echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb<br />";
      echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br />";

      if (file_exists("upload/" . $_FILES["file"]["name"]))
      {
         echo $_FILES["file"]["name"] . " already exists. ";
      }
      else
      {
         move_uploaded_file($_FILES["file"]["tmp_name"],
         "upload/" . $_FILES["file"]["name"]);
         echo "Stored in: " . "upload/" . $_FILES["file"]["name"];
      }
   }
}
else
{
   echo "Invalid file";
}
?>