为应用程序添加文件上载功能

下面的过程演示如何构建可用于向服务器上载图像文件的应用程序。该应用程序允许用户在硬盘上选择要上载的图像,然后将其发送给服务器。用户上载的图像然后会出现在他们用于上载图像的 SWF 文件中。

下面的示例将构建 Flash 应用程序,用以展示服务器端代码的细节。请记住,图像文件在大小上受到限制:只能上载 200K 或更小的图像。

使用 FileReference API 构建 FLA 应用程序:

  1. 创建一个新的 Flash 文档,并将它保存为 fileref.fla
  2. 打开"组件"面板,然后将一个 ScrollPane 组件拖动到舞台上,并为其给定实例名称 imagePane。(在后面的步骤中,将使用 ActionScript 调整此滚动窗格实例的大小和位置。)
  3. 将一个 Button 组件拖到舞台上,然后为其给定实例名称 uploadBtn
  4. 将两个 Label 组件拖动到舞台上,并为其给定实例名称 imageLblstatusLbl
  5. 将 ComboBox 组件拖到舞台上,然后为其给定实例名称 imagesCb
  6. 将 TextArea 组件拖到舞台上,然后为其给定实例名称 statusArea
  7. 在舞台上创建一个新的影片剪辑元件,然后打开该元件用于编辑(双击实例以在元件编辑模式中将其打开)。
  8. 在影片剪辑字段中创建一个新的静态文本字段,然后添加以下文本:

    您尝试下载的文件不在服务器上。

    在最终的应用程序中,可能因下面的原因之一出现此警告:

    • 当上载其它图像时,从服务器的队列中删除了该图像。
    • 由于文件大小超过 200K,因此服务器未复制该图像。
    • 文件类型不是有效的 JPEG、GIF 或 PNG 文件。

      注意

      文本字段的宽度应小于滚动窗格实例的宽度(400 像素);否则,用户必须水平滚动才能看到错误信息

  9. 在"库"中右键单击该元件,并从上下文菜单中选择"链接"。
  10. 选中"为 ActionScript 导出"和"在第一帧导出"复选框,并在"标识符"文本框中键入 Message。单击"确定"。
  11. 将下面的 ActionScript 添加到时间轴中的第 1 帧:

    注意

    代码注释包括有关功能的详细信息。此示例后提供了代码概述。

    import flash.net.FileReference;
    
    imagePane.setSize(400, 350);
    imagePane.move(75, 25);
    uploadBtn.move(75, 390);
    uploadBtn.label = "Upload Image";
    imageLbl.move(75, 430);
    imageLbl.text = "Select Image";
    statusLbl.move(210, 390);
    statusLbl.text = "Status";
    imagesCb.move(75, 450);
    statusArea.setSize(250, 100);
    statusArea.move(210, 410);
    
    /* 侦听器对象侦听 FileReference 事件。 */
    var listener:Object = new Object();
    
    /* 当用户选择某一文件时,将调用 onSelect() 方法,并将一个引用传递给 FileReference 对象。 */
    listener.onSelect = function(selectedFile:FileReference):Void {
        /* 更新文本区域,以通知用户 Flash 正在尝试上载图像。 */
        statusArea.text += "Attempting to upload " + selectedFile.name + "\n";
        /* 将文件上载到服务器上的 PHP 脚本。 */
        selectedFile.upload("http://www.helpexamples.com/flash/file_io/uploadFile.php");
    };
    
    /* 当文件开始上载时,调用 onOpen() 方法,以通知用户该文件将开始上载。 */
    listener.onOpen = function(selectedFile:FileReference):Void {
        statusArea.text += "Opening " + selectedFile.name + "\n";
    };
    
    /* 当文件上载后,调用 onComplete() 方法。 */
    listener.onComplete = function(selectedFile:FileReference):Void {
        /* 通知用户 Flash 已开始下载图像。 */
        statusArea.text += "Downloading " + selectedFile.name + " to player\n";
        /* 将图像添加到组合框组件。 */
        imagesCb.addItem(selectedFile.name);
        /* 将组合框的选定索引设置为最近添加的图像的索引。 */
        imagesCb.selectedIndex = imagesCb.length - 1;
        /* 调用自定义 downloadImage() 函数。 */
        downloadImage();
    };
    
    var imageFile:FileReference = new FileReference();
    imageFile.addListener(listener);
    
    imagePane.addEventListener("complete", imageDownloaded);
    imagesCb.addEventListener("change", downloadImage);
    uploadBtn.addEventListener("click", uploadImage);
    
    /* 如果该图像不下载,则事件对象的总属性将等于 ñ1。在此情况下,将向用户显示一条消息。 */
    function imageDownloaded(event:Object):Void {
        if (event.total == -1) {
            imagePane.contentPath = "Message";
        }
    }
    
    /* 当用户从组合框中选择图像时,或直接从 listener.onComplete() 方法中直接调用 downloadImage() 函数时,downloadImage() 函数将设置滚动窗格的 contentPath,以便开始向播放器下载图像。 */
    function downloadImage(event:Object):Void {
        imagePane.contentPath = "http://www.helpexamples.com/flash/file_io/images/" + imagesCb.value;
    }
    
    /* 当用户单击按钮时,Flash 将调用 uploadImage() 函数,并打开一个文件浏览器对话框。 */
    function uploadImage(event:Object):Void {
        imageFile.browse([{description: "Image Files", extension: "*.jpg;*.gif;*.png"}]);
    }
    

    此 ActionScript 代码首先导入 FileReference 类,然后对舞台上每个组件进行初始化、定位和大小调整。接下来,定义一个侦听器对象,并定义三个事件处理函数:onSelectonOpenonComplete。然后,侦听器对象将被添加到名为 imageFile 的新 FileReference 对象中。然后,向 imagePane 滚动窗格实例、imagesCb 组合框实例和 uploadBtn 按钮实例中添加事件侦听器。在本部分代码后面的代码中,将定义每个事件侦听器函数。

    第一个函数 imageDownloaded() 将进行检查,以确定下载图像的总字节数是否为 1,如果是这样,它将把滚动窗格实例的 contentPath 设置为具有 Message 链接标识符的影片剪辑(您在前面的步骤中创建)。第二个函数 downloadImage() 会尝试将最近上载的图像下载到滚动窗格实例中。当图像下载完成时,将触发前面定义的 imageDownloaded() 函数,以检查是否成功下载了图像。最后一个函数 uploadImage() 将打开一个文件浏览器对话框,它将筛选所有 JPEG、GIF 和 PNG 图像。

  12. 保存对文档的更改。
  13. 选择"文件">"发布设置",然后选择"格式"选项卡,并确保 Flash 和 HTML 都已选中。
  14. (可选)在"发布设置"对话框中,选择"Flash"选项卡,然后从"本地回放安全性"弹出菜单中选择"只访问网络"。

    如果您完成了此步骤,并且在本地浏览器中测试文档,则将不会遇到安全限制。

  15. 在"发布设置"对话框中,单击"发布"创建 HTML 和 SWF 文件。

    完成时,请继续下面的过程,在此您将为 SWF 文件创建容器。

可在硬盘上 Samples 文件夹中找到此示例的范例源文件 FileUpload.fla。

下面的过程要求在 Web 服务器中安装 PHP,并且要求您对名为 images 和 temporary 的子文件夹具有写入权限。您需要先完成前面的过程,或使用前面提及的文件中提供的已完成 SWF 文件。

为图像上载应用程序创建服务器端脚本:

  1. 使用 Dreamweaver 或记事本等文本编辑器创建新的 PHP 文档。
  2. 将以下 PHP 代码添加到文档中。(该脚本后提供了代码概述。)
    <?php
    
    $MAXIMUM_FILESIZE = 1024 * 200; // 200KB
    $MAXIMUM_FILE_COUNT = 10; // ±£Š÷²žŒÒý˜÷-ÞÓ¹‡"- 10 ³ˆŒƒºž
    echo exif_imagetype($_FILES['Filedata']);
    if ($_FILES['Filedata']['size'] <= $MAXIMUM_FILESIZE) {
      move_uploaded_file($_FILES['Filedata']['tmp_name'], "./temporary/".$_FILES['Filedata']['name']);
      $type = exif_imagetype("./temporary/".$_FILES['Filedata']['name']);
      if ($type == 1 || $type == 2 || $type == 3) {
        rename("./temporary/".$_FILES['Filedata']['name'], "./images/".$_FILES['Filedata']['name']);
      } else {
        unlink("./temporary/".$_FILES['Filedata']['name']);
      }
    }
    $directory = opendir('./images/');
    $files = array();
    while ($file = readdir($directory)) {
      array_push($files, array('./images/'.$file, filectime('./images/'.$file)));
    }
    usort($files, sorter);
    if (count($files) > $MAXIMUM_FILE_COUNT) {
      $files_to_delete = array_splice($files, 0, count($files) - $MAXIMUM_FILE_COUNT);
      for ($i = 0; $i < count($files_to_delete); $i++) {
        unlink($files_to_delete[$i][0]);
      }
    }
    print_r($files);
    closedir($directory);
    
    function sorter($a, $b) {
      if ($a[1] == $b[1]) {
        return 0;
      } else {
        return ($a[1] < $b[1]) ? -1 : 1;
      }
    }
    ?>
    

    此 PHP 代码首先定义两个常量变量:$MAXIMUM_FILESIZE$MAXIMUM_FILE_COUNT。这些变量描述上载到服务器中的图像的最大大小 (200KB),以及在图像文件夹中可以保留的最近上载文件的数量 (10)。如果当前上载的图像的文件大小小于或等于 $MAXIMUM_FILESIZE 的值,则图像将被移动到临时文件夹中。

    然后,将检查上载文件的文件类型,以确保图像为 JPEG、GIF 或 PNG。如果图像是兼容的图像类型,则将该图像从临时文件夹复制到图像文件夹中。如果上载的文件不是允许的图像类型,则将从文件系统中删除它。

    然后,将创建一个图像文件夹的目录列表,并使用 while 循环循环访问。images 文件夹中的每个文件都将添加到数组中,然后进行排序。如果图像文件夹中的当前文件数大于 $MAXIMUM_FILE_COUNT 的值,则将删除文件,直到剩下的图像数为 $MAXIMUM_FILE_COUNT 为止。这可以防止图像文件夹增大到超出可管理大小,因为文件夹中同时只能有 10 个图像,并且每个图像只能为 200KB 或更小(或任何时间的图像总共占用的空间大约为 2 MB)。

  3. 保存对 PHP 文档的更改。
  4. 将 SWF、HTML 和 PHP 文件上载到 Web 服务器。
  5. 在 Web 浏览器中查看远程 HTML 文档,并单击 SWF 文件中的"上载图像"按钮。
  6. 在硬盘中查找图像文件并从对话框中选择"打开"。

    SWF 文件将图像文件上载到远程 PHP 文档,并在滚动窗格(会根据需要添加滚动条)中显示该文件。如果您要查看前面上载的图像,可以在舞台上的组合框实例中选择文件名。如果用户尝试上载不允许的图像类型(只允许 JPEG、GIF 或 PNG 图像)或文件大小过大(超过 200 KB)的图像,Flash 将从库的"消息"影片剪辑中显示错误信息。

可在硬盘上的 Samples 文件夹中找到此示例的范例源文件 FileUpload.fla。

有关本地文件安全性的更多信息,请参见关于本地文件安全性和 Flash Player

有关编写 PHP 的更多信息,请转到 www.php.net/