Fortschrittsbalken für Datei-Upload anzeigen

Question

Ich muss eine Anwendung erstellen, in der ich Dateien zum Hochladen hinzufügen kann. Wenn ich Elemente zum Hochladen hinzufüge, sollte ein Fortschrittsbalken zusammen mit jedem hinzugefügten Element angezeigt werden. Und wenn ich auf den Datei-Upload klicke, sollte der Fortschritt des Datei-Uploads für jede Datei in der Fortschrittsleiste angezeigt werden. Der Fortschritt sollte die folgende Funktion verwenden

.....
addEventListener(ProgressEvent.Progress, uploadProgressHandler);

private function uploadProgressHandler(event:ProgressEvent):void
{
    var numPerc:Number = Math.round((Number(event.bytesLoaded) / Number(event.bytesTotal)) * 100);

    //this.progBar.validateNow();

    .....
}  

Kann mir jemand weiterhelfen?

Answer 1

Siehe diese Beispiele:

Hochladen mehrerer Dateien mit Flex und PHP
die wie folgt aussieht:

Upload mehrerer Dateien mit Fortschrittsbalken in Flash und ASP.NET
die wie folgt aussieht:

Answer 2

Flex hat eine Fortschrittsbalken Klasse, haben Sie sich das schon angeschaut?

Answer 3

Hier sind zwei gute Beispiele für Flex-Datei-Uploader (über HTTP):

• Flex File Uploader mit PHP , mit Quelle .
• Merb und Adobe AIR-Datei-Uploader , mit Quelle .

Alt-Text http://blog.vixiom.com/uploads/merb_air_upload.png

Damit die beiden obigen Beispiele zusammen funktionieren und das gewünschte Ergebnis erzielen (mehrere Dateiuploader, eine ProgressBar pro Preloader, in Flex), müssen Sie nur Folgendes tun

1. Herunterladen der Flex File Uploader PHP Projekt
2. Herunterladen der Merb AIR Uploader und kopieren/einfügen Sie die "UploadProgressComponent.mxml" irgendwo in das PHP-Projekt (kopieren Sie nach src/UploadProgressComponent.mxml für den Moment).
3. Ersetzen Sie die DataGrid mit einer Liste und ein benutzerdefinierter ItemRenderer in FileUpload.mxml im Flex File Uploader PHP-Projekt.

Ersetzen Sie dies:

<mx:DataGrid id="listFiles" left="0" top="0" bottom="0" right="0"  
 allowMultipleSelection="true" verticalScrollPolicy="on"
 draggableColumns="false" resizableColumns="false" sortableColumns="false">
    <mx:columns>
        <mx:DataGridColumn headerText="File" dataField="name" wordWrap="true"/>
        <mx:DataGridColumn headerText="Size" dataField="size" width="75" textAlign="right"/>
    </mx:columns>
</mx:DataGrid>  

damit:

<mx:List id="listFiles" left="0" top="0" bottom="0" right="0"
 allowMultipleSelection="true" verticalScrollPolicy="on"
 itemRenderer="UploadProgressComponent"/>  

Das Ergebnis: Uploader für mehrere Dateien in Flex, mit einem benutzerdefinierten ItemRenderer, der für jede FileReference einen ProgressBar hat. Uploads zu einem PHP-Skript, das Sie für alles austauschen können.

Von dort aus sollte es sehr einfach sein, sie anzupassen. Lassen Sie mich wissen, ob das funktioniert, Lance