Hoch- und Herunterladen von Dateien -- Flash CS3

Mit der FileReference-Klasse haben Sie die Möglichkeit, Dateien zwischen einem Client und einem Server hoch- und herunterzuladen. Die Benutzer werden aufgefordert, in einem Dialogfeld (unter Windows beispielsweise im Dialogfeld „Öffnen") eine hochzuladende Datei auszuwählen oder einen Speicherort für den Download anzugeben.

Jedes mit ActionScript erstellte FileReference-Objekt verweist auf eine bestimmte Datei auf der Festplatte des Benutzers. Die Eigenschaften des Objekts enthalten Angaben zu Größe, Typ, Name, Erstellungsdatum und Änderungsdatum der Datei.

Es gibt zwei Verfahren, eine Instanz der FileReference-Klasse zu erstellen. Sie können, wie im folgenden Code gezeigt, den new-Operator verwenden:

import flash.net.FileReference;
var myFileReference:FileReference = new FileReference();

Sie können auch die FileReferenceList.browse()-Methode aufrufen. Dadurch wird auf dem Computer des Benutzers ein Dialogfeld geöffnet, in dem dieser zum Auswählen einer oder mehrerer hochzuladenden Dateien aufgefordert wird. Hat der Benutzer mindestens eine Datei erfolgreich ausgewählt, wird ein Array von FileReference-Objekten erstellt. Jedes FileReference-Objekt stellt eine vom Benutzer im Dialogfeld ausgewählte Datei dar. Ein FileReference-Objekt enthält keine Daten in den FileReference-Eigenschaften (wie name, size oder modificationDate), bis eines von Folgendem eintritt:

Die Wiedergabe einer SWF-Datei auf den meisten Playern fortgesetzt, während Aufrufe der Methode FileReference.browse(), FileReferenceList.browse() oder FileReference.download() ausgeführt werden.

Unterthemen

FileReference-Klasse

Die FileReference-Klasse stellt ein Verfahren dar, Dateien zwischen dem Computer eines Benutzers und einem Server hoch- bzw. herunterzuladen. In einem Dialogfeld des Betriebssystems wird der Benutzer aufgefordert, eine hochzuladende Datei oder einen Speicherplatz für den Download auszuwählen. Jedes FileReference-Objekt verweist auf eine Datei auf der Festplatte des Benutzercomputers und verfügt über Eigenschaften, die Informationen zu Größe, Typ, Name, Erstellungs- und Änderungsdatum sowie Ersteller der Datei enthalten.

FileReference-Instanzen können auf zwei verschiedene Verfahren erstellt werden:

Bei Upload- und Download-Vorgängen kann mit einer SWF-Datei nur auf Dateien in der eigenen Domäne und in den in einer übergreifenden Richtliniendatei angegebenen Domänen zugegriffen werden. Wenn die SWF-Datei, von der das Hoch- oder Herunterladen ausgelöst wird, nicht aus derselben Domäne wie der Server stammt, müssen Sie eine Richtliniendatei auf dem Dateiserver ablegen.

Das den Upload verwaltende Serverskript erwartet eine HTTP POST-Anforderung mit den folgenden Elementen:

POST /handler.asp HTTP/1.1
Accept: text/*
Content-Type: multipart/form-data;
boundary=----------Ij5ae0ae0KM7GI3KM7ei4cH2ei4gL6
User-Agent: Shockwave Flash
Host: www.mydomain.com
Content-Length: 421
Connection: Keep-Alive
Cache-Control: no-cache

------------Ij5ae0ae0KM7GI3KM7ei4cH2ei4gL6 
Content-Disposition: form-data; name="Filename"

sushi.jpg 
------------Ij5ae0ae0KM7GI3KM7ei4cH2ei4gL6
Content-Disposition: form-data; name="Filedata"; filename="sushi.jpg"
Content-Type: application/octet-stream

Test File 
------------Ij5ae0ae0KM7GI3KM7ei4cH2ei4gL6
Content-Disposition: form-data; name="Upload"

Submit Query
------------Ij5ae0ae0KM7GI3KM7ei4cH2ei4gL6
(actual file data,,,)

Die folgende HTTP POST-Beispielanforderung sendet drei POST-Variable: api_sig, api_key und auth_token, und verwendet einen benutzerdefinierten Wert für den Upload-Datenfeldnamen, „photo":

POST /handler.asp HTTP/1.1
Accept: text/*
Content-Type: multipart/form-data;
boundary=----------Ij5ae0ae0KM7GI3KM7ei4cH2ei4gL6
User-Agent: Shockwave Flash
Host: www.mydomain.com
Content-Length: 421
Connection: Keep-Alive
Cache-Control: no-cache

------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="Filename"

sushi.jpg
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="api_sig"

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="api_key"

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="auth_token"

XXXXXXXXXXXXXXXXXXXXXXX
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="photo"; filename="sushi.jpg"
Content-Type: application/octet-stream

(actual file data,,,)
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7
Content-Disposition: form-data; name="Upload"

Submit Query
------------Ij5GI3GI3ei4GI3ei4KM7GI3KM7KM7--

Hochladen von Dateien auf einen Server

Zum Hochladen von Dateien auf einen Server rufen Sie zunächst die browse()-Methode auf, damit ein Benutzer eine oder mehrere Dateien auswählen kann. Dann, nachdem die FileReference.upload()-Methode aufgerufen wurde, wird die ausgewählte Datei an den Server übertragen. Hat der Benutzer mehrere Dateien mit der Methode FileReferenceList.browse() ausgewählt, erstellt Flash Player ein Array der ausgewählten Dateien mit der Bezeichnung FileReferenceList.fileList. Dann können Sie die Dateien mithilfe der FileReference.upload()-Methode einzeln hochladen.

In der Standardeinstellung können Benutzer auf dem lokalen Computer einen beliebigen Dateityp im Dialogfeld zur Dateiauswahl auswählen, obwohl Entwickler mit der FileFilter-Klasse und durch Übergeben eines Arrays mit Dateifilterinstanzen an die browse()-Methode einen oder mehrere benutzerdefinierte Filter für Dateitypen angeben können:

var imageTypes:FileFilter = new FileFilter("Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg; *.jpeg; *.gif; *.png");
var textTypes:FileFilter = new FileFilter("Text Files (*.txt, *.rtf)", "*.txt; *.rtf");
var allTypes:Array = new Array(imageTypes, textTypes);
var fileRef:FileReference = new FileReference();
fileRef.browse(allTypes);

Nachdem der Benutzer die Dateien ausgewählt und im Dialogfeld zur Dateiauswahl auf die Schaltfläche zum Öffnen der Datei geklickt hat, wird das Event.SELECT-Ereignis ausgelöst. Wurde die FileReference.browse()-Methode zur Auswahl einer hochzuladende Datei verwendet, wird der folgende Code zum Senden der Datei an einen Webserver erforderlich:

var fileRef:FileReference = new FileReference();
fileRef.addEventListener(Event.SELECT, selectHandler);
fileRef.addEventListener(Event.COMPLETE, completeHandler);
try
{
    var success:Boolean = fileRef.browse();
}
catch (error:Error)
{
    trace("Unable to browse for files.");
}
function selectHandler(event:Event):void
{
    var request:URLRequest = new URLRequest("http://www.[yourdomain].com/fileUploadScript.cfm")
    try
    {
        fileRef.upload(request);
    }
    catch (error:Error)
    {
        trace("Unable to upload file.");
    }
}
function completeHandler(event:Event):void
{
    trace("uploaded");
}

Wenn Sie versuchen, eine Datei mit der FileReference.upload()-Methode hochzuladen, kann eines der folgenden Ereignisse ausgelöst werden:

Wenn Sie ein Serverskript in ColdFusion erstellen, um einen Dateiupload von Flash Player zu akzeptieren, können Sie Code wie den Folgenden verwenden:

<cffile action="upload" filefield="Filedata" destination="#ExpandPath('./')#" nameconflict="OVERWRITE" />

Dieser ColdFusion-Code lädt die von Flash Player gesendete Datei hoch und speichert sie im gleichen Verzeichnis wie die ColdFusion-Vorlage. Dabei wird eine Datei mit dem gleichen Namen überschrieben. Das vorangegangene Codebeispiel zeigt den mindestens erforderlichen Code, der zum Akzeptieren eines Dateiuploads erforderlich ist; dieses Skript sollte in einer Produktionsumgebung nicht verwendet werden. Im Idealfall fügen Sie eine Datenvalidierung hinzu, um sicherzustellen, dass Benutzer nur akzeptierte Dateitypen hochladen, beispielsweise eine Bilddatei anstelle eines potenziell gefährlichen serverseitigen Skripts.

Der folgende Code demonstriert Datei-Uploads mithilfe von PHP und umfasst eine Datenvalidierung. Das Skript beschränkt die Anzahl der hochgeladenen Dateien im Upload-Verzeichnis auf 10, stellt sicher, dass die Datei kleiner als 200 KB ist und gestattet nur, dass Dateien des Typs JPEG, GIF oder PNG hochgeladen und im Dateisystem gespeichert werden.

<?php
$MAXIMUM_FILESIZE = 1024 * 200; // 200KB
$MAXIMUM_FILE_COUNT = 10; // keep maximum 10 files on server
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;
    }
}
?>

Mit der POST- oder GET-Anforderungsmethode können Sie zusätzliche Variable an das Upload-Skript übergeben. Sie können den folgenden Code verwenden, um zusätzliche POST-Variablen an Ihr Upload-Skript zu übergeben:

var fileRef:FileReference = new FileReference();
fileRef.addEventListener(Event.SELECT, selectHandler);
fileRef.addEventListener(Event.COMPLETE, completeHandler);
fileRef.browse();
function selectHandler(event:Event):void
{
    var params:URLVariables = new URLVariables();
    params.date = new Date();
    params.ssid = "94103-1394-2345";
    var request:URLRequest = new URLRequest("http://www.yourdomain.com/FileReferenceUpload/fileupload.cfm");
    request.method = URLRequestMethod.POST;
    request.data = params;
    fileRef.upload(request, "Custom1");
}
function completeHandler(event:Event):void
{
    trace("uploaded");
}

Das vorangegangene Codebeispiel erstellt ein neues URLVariables-Objekt, das Sie an das externe serverseitige Skript übergeben. In früheren Versionen von ActionScript konnten Sie Variable durch Angabe von Werten im Abfrage-String an das Server-Upload-Skript übergeben. Mit ActionScript 3.0 können Sie Variable mit einem URLRequest-Objekt an das externe Skript übergeben. Dies ermöglicht Ihnen die Übergabe von Daten mit der POST- oder GET-Methode, und das wiederum macht die Übergabe längerer Datensätze einfacher und übersichtlicher. Um anzugeben, welche Variablen mit der Anforderungsmethode GET oder POST übergeben werden, können Sie die Eigenschaft URLRequest.method auf URLRequestMethod.GET bzw. URLRequestMethod.POST einstellen.

ActionScript 3.0 ermöglicht Ihnen darüber hinaus das Überschreiben des standardmäßigen Namens für das Filedata-Upload-Dateifeld, indem Sie einen zweiten Parameter für die Methode upload() angeben. Dies wurde im vorangegangenen Codebeispiel demonstriert (in dem der Standardwert Filedata durch Custom1 ersetzt wurde).

In der Standardeinstellung versucht Flash Player nicht, einen Test-Upload zu senden, obwohl Sie diese Einstellung außer Kraft setzen können, indem Sie true als dritten Parameter für die upload()-Methode angeben. Der Zweck eines Test-Upload besteht darin, zu überprüfen, ob der tatsächliche Datei-Upload erfolgreich verlaufen wird und ob eine Authentifizierung beim Server (falls erforderlich) erfolgreich sein wird.

Herunterladen von Dateien von einem Server

Mit der Methode FileReference.download() können Sie Benutzern das Herunterladen von Dateien von einem Server ermöglichen. Dieser Methode arbeitet mit zwei Parametern: request und defaultFileName. In der erste Parameter ist ein URLRequest-Objekt, das die URL der herunterzuladenden Datei enthält. Der zweite Parameter ist optional - mit ihm können Sie einen standardmäßigen Dateinamen angeben, der im Dialogfeld der Download-Datei angezeigt wird. Wenn Sie den zweiten Parameter defaultFileName weglassen, wird der Dateiname aus der angegebenen URL verwendet.

Mit dem folgenden Code wird eine Datei namens „index.xml" aus dem gleichen Verzeichnis wie das SFB-Dokument heruntergeladen:

var request:URLRequest = new URLRequest("index.xml");
var fileRef:FileReference = new FileReference();
fileRef.download(request);

Um den Standardnamen von „index.xml" in „currentnews.xml" zu ändern, verwenden Sie den defaultFileName-Parameter. Dies wird im folgenden Codeausschnitt gezeigt:

var request:URLRequest = new URLRequest("index.xml");
var fileToDownload:FileReference = new FileReference();
fileToDownload.download(request, "currentnews.xml");

Das Umbenennen einer Datei ist insbesondere dann sinnvoll, wenn der Dateiname auf dem Server nicht sonderlich intuitiv ist oder vom Server erzeugt wurde. Außerdem sollten Sie den Parameter defaultFileName explizit angeben, wenn Sie eine Datei mit einem serverseitigen Skript und nicht direkt herunterladen. Beispielsweise müssen Sie den Parameter defaultFileName angeben, wenn Sie mit einem serverseitigen Skript arbeiten, das bestimmte Dateien basierend auf den an das Skript übergebenen URL-Variablen herunterlädt. Andernfalls wird der Name Ihres serverseitigem Skripts zum Standardnamen der heruntergeladenen Datei.

Daten können mit der download()-Methode an den Server übertragen werden, indem Sie der URL Parameter hinzufügen, die das Serverskript parst. Mit dem folgenden ActionScript 3.0-Codeausschnitt wird ein Dokument basierend auf den Parametern heruntergeladen, die an ein ColdFusion-Skript übergeben wurden:

package
{
    import flash.display.Sprite;
    import flash.net.FileReference;
    import flash.net.URLRequest;
    import flash.net.URLRequestMethod;
    import flash.net.URLVariables;

    public class DownloadFileExample extends Sprite
    {
        private var fileToDownload:FileReference;
        public function DownloadFileExample()
        {
            var request:URLRequest = new URLRequest();
            request.url = "http://www.[yourdomain].com/downloadfile.cfm";
            request.method = URLRequestMethod.GET;
            request.data = new URLVariables("id=2");
            fileToDownload = new FileReference();
            try
            {
                fileToDownload.download(request, "file2.txt");
            }
            catch (error:Error)
            {
                trace("Unable to download file.");
            }
        }
    }
}

Der folgende Code zeigt ein ColdFusion-Skript, „download.cfm", das abhängig vom Wert der URL-Variablen eine von zwei Dateien vom Server herunterlädt:

<cfparam name="URL.id" default="1" />
<cfswitch expression="#URL.id#">
    <cfcase value="2">
        <cfcontent type="text/plain" file="#ExpandPath('two.txt')#" deletefile="No" />
    </cfcase>
    <cfdefaultcase>
        <cfcontent type="text/plain" file="#ExpandPath('one.txt')#" deletefile="No" />
    </cfdefaultcase>
</cfswitch>

FileReferenceList-Klasse

Mit der FileReferenceList-Klasse können Benutzer eine oder mehrere Dateien zum Hochladen an ein serverseitiges Skript auswählen. Der Datei-Upload wird von der FileReference.upload()-Methode verarbeitet, die für jede vom Benutzer ausgewählte Datei aufgerufen werden muss.

Mit dem folgenden Code werden zwei FileFilter-Objekte (imageFilter und textFilter) erstellt und in einem Array an die FileReferenceList.browse()-Methode übergeben. Dies sorgt dafür, dass das Datei-Dialogfeld des Betriebssystems zwei mögliche Filter für Dateitypen anzeigt.

var imageFilter:FileFilter = new FileFilter("Image Files (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg; *.jpeg; *.gif; *.png");
var textFilter:FileFilter = new FileFilter("Text Files (*.txt, *.rtf)", "*.txt; *.rtf");
var fileRefList:FileReferenceList = new FileReferenceList();
try
{
    var success:Boolean = fileRefList.browse(new Array(imageFilter, textFilter));
}
catch (error:Error) 
{
    trace("Unable to browse for files.");
}

Das Auswählen und Hochladen einer oder mehrerer Dateien mithilfe der FileReferenceList-Klasse entspricht dem Verwenden von FileReference.browse() zur Auswahl von Dateien, obwohl mit FileReferenceList mehrere Dateien gleichzeitig ausgewählt werden können. Beim Hochladen mehrerer Dateien müssen Sie jede ausgewählte Datei mit FileReference.upload() hochladen. Dies wird im folgenden Code gezeigt:

var fileRefList:FileReferenceList = new FileReferenceList();
fileRefList.addEventListener(Event.SELECT, selectHandler);
fileRefList.browse();

function selectHandler(event:Event):void
{
    var request:URLRequest = new URLRequest("http://www.[yourdomain].com/fileUploadScript.cfm");
    var file:FileReference;
    var files:FileReferenceList = FileReferenceList(event.target);
    var selectedFileArray:Array = files.fileList;
    for (var i:uint = 0; i < selectedFileArray.length; i++)
    {
        file = FileReference(selectedFileArray[i]);
        file.addEventListener(Event.COMPLETE, completeHandler);
        try
        {
            file.upload(request);
        }
        catch (error:Error)
        {
            trace("Unable to upload files.");
        }
    }
}
function completeHandler(event:Event):void
{
    trace("uploaded");
}

Da das Ereignis Event.COMPLETE jedem einzelnen FileReference-Objekt im Array hinzugefügt wird, ruft Flash Player die Methode completeHandler() auf, wenn das Hochladen für jede einzelne Datei abgeschlossen ist.