PHP / Actionscript 3多文件上传与进度指示器

时间:2011-05-29 19:57:26

标签: php flash actionscript-3

我正在尝试使用AS3和PHP将图像文件上传到我的服务器,目前我成功上传多个文件并将其限制为仅限图像,但由于我是Flash和AS3的新手,我发现它难以弄清楚如何在上传文件时显示加载栏,以及在上传所有文件后执行功能以转到指定的框架。

到目前为止,这是我的代码,

AS3:

import flash.net.FileReferenceList;
import flash.events.Event;
import flash.net.URLRequest;
import flash.net.FileReference;

var fileRef:FileReferenceList = new FileReferenceList();
fileRef = new FileReferenceList();
fileRef.browse(new Array( new FileFilter( "Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg;*.jpeg;*.gif;*.png" )));
fileRef.addEventListener(Event.SELECT, fileSelectHandler);

var uploadURL:URLRequest = new URLRequest();
var uploadPhotoScript:String = "http://127.0.0.1/upload.php";
uploadURL.url = uploadPhotoScript;

function fileSelectHandler(event:Event):void {
    for each(var fileToUpload:FileReference in fileRef.fileList){
            uploadSingleFile(fileToUpload);
        }
}

function uploadSingleFile(file:FileReference):void {
    file.upload(uploadURL);
    file.addEventListener(Event.COMPLETE, completeHandler);
}

function completeHandler(event:Event):void {
    trace("upload complete");
}

PHP:

if(!empty($_FILES)){
    $tmpfile = $_FILES['Filedata']['tmp_name'];
    $targetfile = dirname(__FILE__) . '/' . $_FILES['Filedata']['name'];
    move_uploaded_file($tmpfile, $targetfile);
}

我的问题是,

1:如何显示百分比或上传栏,指示正在上传的文件的进度?

2:如何在成功上传所有文件后启动回调功能?

3:如何在点击时显示文件浏览器,而不是在加载Flash文件时?

如果你们可以发布一两个链接到好的教程/资源或一些建议,甚至可能是一个或两个代码片段,因为我是Actionscript 3的新手。

提前Thanx!

1 个答案:

答案 0 :(得分:4)

按顺序回答您的问题:

1:您可以使用ProgressEvent显示文件上载进度。由于File将是事件的调度程序,因此您可以访问已在事件中作为e.currentTarget调度进度的FileReference,并从此处可以访问该文件引用的唯一属性,以便您可以准确地更新可视上载该特定文件的进度。例如:

function uploadSingleFile(file:FileReference):void {
    file.addEventListener(ProgressEvent.PROGRESS, onUploadProgress);
    file.upload(uploadURL);
    file.addEventListener(Event.COMPLETE, completeHandler);
}

function onUploadProgress(e:ProgressEvent):void
{
    var f:FileReference = e.currentTarget as FileReference;
    var fileName:String = f.name; //Now I know which file it is, I can update accordingly
    var progress:Number = (e.bytesLoaded / e.bytesTotal) * 100; //shows percent, you might want to round this off using Math.round(number);
}

2:为了在加载所有文件后启动回调,您可以通过存储最初选择的文件数,然后专门为每个项添加回调来完成此操作,并在完成时减少总计数直到它是0,此时您将知道所有文件已上传:

var totalFiles:int = 0;

function fileSelectHandler(event:Event):void {
    for each(var fileToUpload:FileReference in fileRef.fileList){
            ++totalFiles;
            uploadSingleFile(fileToUpload);            
        }
}

function uploadSingleFile(file:FileReference):void {
    file.addEventListener(ProgressEvent.PROGRESS, onUploadProgress);
    file.addEventListener(Event.COMPLETE, onFileUploadComplete);
    file.upload(uploadURL);
    file.addEventListener(Event.COMPLETE, completeHandler);
}

function onFileUploadComplete(e:Event):void
{
    --totalFiles;
    if(totalFiles == 0){
        //All files have been uploaded
    }
}

3:要使浏览器显示在onClick上,只需将MouseEvent.MOUSE_DOWN侦听器添加到某种对象或按钮,甚至是舞台,无论如何。像这样:

var uploadButton:Button = new Button(); // Note this will require the Button component to  be included in your library in flash CS

uploadButton.label = "Upload Files";
uploadButton.width = 150; //Or whatever;
uploadButton.x = (stage.stageWidth * .5) - (uploadButton.width * .5);
uploadButton.y = (stage.stageHeight * .5) - (uploadButton.height * .5);
stage.addChild(uploadButton);

uploadButton.addEventListener(MouseEvent.MOUSE_DOWN, onUploadClicked);

function onUploadClicked(e:MouseEvent):void
{
    var fileRef:FileReferenceList = new FileReferenceList();
    fileRef = new FileReferenceList();
    fileRef.browse(new Array( new FileFilter( "Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg;*.jpeg;*.gif;*.png" )));
    fileRef.addEventListener(Event.SELECT, fileSelectHandler);
}

最后关于教程等,我建议http://gotoandlearn.com学习flash。我还建议只查看AS3文档,因为所有这些nfo都可以通过查找有问题的类FileReferenceList来收集。请注意我在这里完成了这个代码,所以我没有IDE检查或任何东西。但它应该工作得很好。希望这可以帮助。 :)

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/FileReferenceList.html
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/FileReference.html#upload()

http://adobe.com/go/as3lr