图 1 所示的 PhotoUpload 范例应用程序演示 Adobe AIR 的以下文件处理功能:

• 设置 File 对象, 使其指向某个文件路径。
• 将图像转换为 JPEG 二进制数据, 并将数据写入文件。
• 将文件上载至服务器

图 1。通过本范例应用程序可以上载 JPEG 文件。

注意: 本范例应用程序按原样提供, 用于教学目的。

要求

若要充分利用本篇文章, 您需要以下软件和文件:

Adobe AIR

• 下载

Adobe Flex Builder 3

• 试用
• 购买

范例文件:

• PhotoUploadFlex.zip (ZIP, 40K)
• PhotoUploadFlex.air (ZIP, 544K)

本范例应用程序包括以下文件:

• PhotoUpload.mxml: 应用程序主文件 (Flex 的 MXML 格式), 其中包括本文所讨论的代码
• PhotoUpdate-app.xml: AIR 应用程序描述符文件
• JPGEncoder.as: JPGEncoder 类所使用的实用程序类
• BitString.as: JPGEncoder 类所使用的实用程序类
• Uploader.as: 用于将文件上载至 Web 服务器的类
• index.php: 要包括在支持 PHP 的 Web 服务器的 http://localhost/PhotoSyncUpload/ 文件夹中的文件
• AIR 图标文件范例

注意: 本范例应用程序使用 JPGEncoder.as 和 BitString.as 类, 这些类发布在 ActionScript 3.0 Corelib 项目。

其它:

本应用程序要求安装网络摄像头, 且必须有权访问支持 PHP 的 Web 服务器。

必备知识

应具备使用 Flex Builder 或 Flex SDK 构建应用程序的一般经验。有关使用此快速入门指南的详细信息, 请参阅用 Flex 构建快速入门范例应用程序。

测试应用程序

通过本范例应用程序, 可以从网络摄像头捕获图像, 并将所捕获的图像 (存储为 JPEG 文件) 上载至 Web 服务器。

运行应用程序 (PhotoUploadLex.air) 之前, 在支持 PHP 的 Web 服务器的 http://localhost/PhotoSyncUpload/ 文件夹中安装 index.php 文件 (随 PHP 目录中的源文件一起提供)。此外, 请确保在计算机上安装了网络摄像头。

测试应用程序:

1. 安装应用程序 (通过双击所提供的 AIR 文件), 并使其运行。
2. 将网络摄像头朝向要拍摄的物体。
3. 单击 Preview (预览) 按钮。然后, 单击 Save (保存) 按钮保存图像。
4. 重复此步骤保存多个图像。
5. 单击 Upload (上载) 按钮, 将文件上载至 Web 服务器。

了解代码

注意: 对于文件的 MXML 代码所使用的全部 Flex 组件, 本文将不一一介绍。有关详细信息, 请参阅《Flex 3 语言参考》*。

预览网络摄像头图像

shoot() 方法调用 flasher() 方法, 后者模拟照相机的闪光灯, 方法是快速呈现一个不透明的白色 NativeWindow 来填充屏幕:

private function flasher():void
{
    var windowInitOpts:NativeWindowInitOptions = new NativeWindowInitOptions();
    windowInitOpts.systemChrome = NativeWindowSystemChrome.NONE;
    windowInitOpts.type = NativeWindowType.LIGHTWEIGHT;
    var flashCube:NativeWindow = new NativeWindow(windowInitOpts);
    flashCube.x = 0;
    flashCube.y = 0;
    flashCube.width = Capabilities.screenResolutionX;
    flashCube.height = Capabilities.screenResolutionY;
    flashCube.visible = true;
    setTimeout(closeFlash, 100, flashCube);
}
private function closeFlash(flashCube:NativeWindow):void {
    flashCube.close()
}

然后 shoot() 方法将 VideoDisplay 视频组件中的图像捕获至 BitmapData 对象, 并将该 BitmapData 写入 shot Image 组件 (通过设置 Image 组件的 source 属性):

bmd = new BitmapData(video.width, video.height);
bmd.draw(video);
var bmp:Bitmap = new Bitmap(bmd);
bmp.x = (stage.stageWidth - bmp.width)/2
shot.source = bmp;

保存文件

save() 方法设置一个 FileStream 对象, 用于将图像数据写入文件。通过调用 JPEGEncoder 对象的 encode() 方法, 将图像数据转换为包含按 JPEG 编码的数据的 ByteArray:

private function save():void {
    file = File.applicationStorageDirectory;
    file = file.resolvePath("images/" + new Date().time.toString() + ".jpg");
    stream = new FileStream;
    stream.open(file, FileMode.WRITE);
    var data:ByteArray = getJPEG(bmd);
    stream.writeBytes(data, 0, data.length);
    stream.close();
}
private function getJPEG(bmd:BitmapData):ByteArray {
    var jpg:JPGEncoder = new JPGEncoder();
    return jpg.encode(bmd);
}

请注意, file 对象指向应用程序资源目录的图像子目录中的文件, 而文件名以 Date 对象的 time 属性所提供的时间戳为基础:

file = File.applicationStorageDirectory;
file = file.resolvePath("images/" + new Date().time.toString() + ".jpg");

将文件上载至 Web 服务器

Uploader 类包含用于将文件上载至 Web 服务器的代码。通过调用 Uploader 对象的 addFile() 方法, 并向该方法传递 File 对象, 从而将文件添加至要上载的文件的列表中:

for (var i:uint = 0; i < files.length; i++)
{
    file = files[i];
    if (!file.isDirectory)
    {
        uploader.addFile(file);
    }
}

为 Uploader 对象的 complete 和 progress 事件注册事件侦听器, 然后调用该对象的 start() 方法, 此方法将文件上载至作为参数传递的 URL:

uploader.addEventListener(Event.COMPLETE, uploadCompleteHandler);
uploader.addEventListener(ProgressEvent.PROGRESS, progressHandler);
uploader.start(UPLOAD_URL + "/index.php");

Uploader 对象通过调用其 upload() 方法, 并传递 File 对象作为参数, 从而一次一个地上载文件:

private function uploadFile(file:File):void
{
    var urlRequest:URLRequest = new URLRequest(url);
    urlRequest.method = URLRequestMethod.POST;
    file.addEventListener(ProgressEvent.PROGRESS, uploadProgress);
    file.addEventListener(Event.COMPLETE, uploadComplete);
    file.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA , uploadServerData);
    file.addEventListener(SecurityErrorEvent.SECURITY_ERROR, uploadError);
    file.addEventListener(HTTPStatusEvent.HTTP_STATUS, uploadError);
    file.addEventListener(IOErrorEvent.IO_ERROR, uploadError);
    file.upload(urlRequest, "uploadfile");
}

File 对象的 upload() 方法将文件上载至给定 URL (指定为 URLRequest 对象):

在 Web 服务器上张贴的 PHP 页面将字符串作为提示, 以便接受按 POST 数据提供的文件作为要上载 (并保存在 Web 服务器上的 uploaded 子目录中) 的文件。

用户通过单击 View in Browser (在浏览器中查看) 按钮可以预览包含所上载文件的网页, 该按钮调用 viewHTML() 方法。此方法调用 navigateToURL() 函数, 而该函数将在系统默认的 Web 浏览器中打开网页:

private function viewHTML():void
{
    var urlReq:URLRequest = new URLRequest(UPLOAD_URL + "/uploaded");
    navigateToURL(urlReq);
}

关于作者