Upload Fortschrittsanzeige mit ASP.NET und AJAX

[KL]

Hallo,
ich will ein "UploadPortal" machen. Das habe ich mit ASP.NET realisiert und nutze das 'FileUpload' ASP-Element. Ich würde gerne eine Prozentanzeige haben, die den Upload-Fortschritt anzeigt. Dabei muss der Fortschritt auch nur alle 10-20 sec akutalisiert werden, da ich davon ausgehe, das meist große Datein über das UploadPortal hochgeladen werden. Ich habe noch sehr wenig mit ASP.NET gemacht und kenne mich auch nur wenig mit AJAX aus. Würde mich freuen, wenn man mir eklärt wie ich das durch Javascript und ASP.NET realisieren kann, auch der ASP.NET teil wäre mir wichtig.
______
KL

[EKKi]

Mahlzeit KL,

Würde mich freuen, wenn man mir eklärt wie ich das durch Javascript und ASP.NET realisieren kann, auch der ASP.NET teil wäre mir wichtig.

Grundsätzlich würde ich folgendes Vorgehen empfehlen (wenn Du es "von Hand" machen willst):

Clientseitig:

1.) Ermittle die Größe der hochzuladenden Datei.

2.) Beginne das Hochladen.

4.) Frage alle x Sekunden beim Server an, wie groß der bereits hochgeladene Teil der Datei ist.

6.) Simple Prozentrechnung und geeignete (grafische) Darstellung runden den Vorgang dann ab.

Serverseitig:

3.) Nimm die Datei entgegen.

5.) Ermittle jedesmal, wenn eine Anfrage nach der bereits hochgeladenen Größe eintrifft, die Größe des bereits hochgeladenen Teils der Datei und gib die Zahl zurück.

MfG,
EKKi

[Der Martin]

Hallo,

Grundsätzlich würde ich folgendes Vorgehen empfehlen (wenn Du es "von Hand" machen willst):

Clientseitig:
1.) Ermittle die Größe der hochzuladenden Datei.

bei diesem ersten, scheinbar einfachen Schritt tritt aber schon ein großes Problem auf: Als clientseitige Scriptsprache kommt nur Javascript in Betracht (zumal der OP im Threadtitel schon AJAX erwähnt), und Javascript hat bekanntlich keinen Zugriff auf so etwas wie Dateien, geschweige denn deren Eigenschaften. Wie bekommt man also die gewünschte Information?

2.) Beginne das Hochladen.
4.) Frage alle x Sekunden beim Server an, ...
6.) Simple Prozentrechnung ...

Serverseitig:
3.) Nimm die Datei entgegen.
5.) Ermittle jedesmal, wenn eine Anfrage ...

Sehr kreative Numerierung. Zwar irgendwie logisch, aber eigenartig. ;-)

Ciao,
 Martin

[EKKi]

Mahlzeit Der Martin,

Clientseitig:
1.) Ermittle die Größe der hochzuladenden Datei.

bei diesem ersten, scheinbar einfachen Schritt tritt aber schon ein großes Problem auf:

Das ist mir klar.

Als clientseitige Scriptsprache kommt nur Javascript in Betracht

Jein. Der OP wünscht sich eine Lösung mit Javascript. Spätestens bei der von Dir genannten Erkenntnis sollte ihm klar sein, dass er hier Wunsch und Wirklichkeit in Einklang bringen sollte - d.h. entweder auf andere Technologien setzen oder seine Vorstellungen herunterschrauben.

Wie bekommt man also die gewünschte Information?

Indem man Technologien benutzt, die diese Information liefern können. Mich deucht, ich habe mal etwas von Flash-Uploadern läuten hören ...

Sehr kreative Numerierung. Zwar irgendwie logisch, aber eigenartig. ;-)

Ich habe versucht, die Reihenfolge, in der die einzelnen Punkte auftreten, numerisch darzustellen. Außerdem wollte ich zwischen client- und serverseitig unterscheiden. Da ich keine große Lust auf ASCII-Malerien oder Leertasten-Orgien hatte, dachte ich mir, das wäre die einfachste Möglichkeit ... :-)

MfG,
EKKi

[KL]

Hey Ekki,

Clientseitig:
1.) Ermittle die Größe der hochzuladenden Datei.

bei diesem ersten, scheinbar einfachen Schritt tritt aber schon ein großes Problem auf:

Das ist mir klar.

Als clientseitige Scriptsprache kommt nur Javascript in Betracht

Jein. Der OP wünscht sich eine Lösung mit Javascript. Spätestens bei der von Dir genannten Erkenntnis sollte ihm klar sein, dass er hier Wunsch und Wirklichkeit in Einklang bringen sollte - d.h. entweder auf andere Technologien setzen oder seine Vorstellungen herunterschrauben.

Wie bekommt man also die gewünschte Information?

Indem man Technologien benutzt, die diese Information liefern können. Mich deucht, ich habe mal etwas von Flash-Uploadern läuten hören ...

Hmm, was ist denn mit Javascript und ASP.NET alleine möglich? Ich möchte alles eig. sehr schlank halten, deswegen will ich nicht anderes als Javascript und ASP.NET nutzen.
Habe vorher noch auf deinen Ablauf was gepostet, geht das also alles gar nicht?
____

KL

[EKKi]

Mahlzeit KL,

Hmm, was ist denn mit Javascript und ASP.NET alleine möglich?

Da ich - wie bereits gesagt - .NET zu wenig kenne, kann ich Dir nur auf den ersten Teil Deiner Frage verbindlich antworten: mit Javascript ist generell ein Zugriff auf das lokale Dateisystem (und dazu gehört auch z.B. die Ermittlung der Dateigröße von lokal vorhandenen Dateien) *NICHT* möglich - und das ist auch gut so.

Ob .NET Funktionalitäten bietet, die Gesamtgröße einer Datei *vor* dem Upload (bzw. bereits während des POSTens des entsprechenden Formulars) festzustellen, weiß ich nicht. Versuche, das herauszufinden.

Habe vorher noch auf deinen Ablauf was gepostet, geht das also alles gar nicht?

Evtl. nicht ganz so, wie Du Dir das vorstellst.

MfG,
EKKi

[KL]

Hey,
ich bin nach folgender Anleitung vorgegangen: Vielleicht könntest du mir auch anhand dieser Anleitung ein bisschen Erklären was ich machen muss:
Codebeispiel 1:
http://msdn.microsoft.com/de-de/library/aa479405.aspx#ID0EMC

Clientseitig:

1.) Ermittle die Größe der hochzuladenden Datei.

Wie geht das denn Clientseitig also über ASP.NET bekomme ich das hin?
Außerdem muss ich das FileUpload Element nicht irgendwie noch in ein UpdatePanel oder so stecken? Wie genau muss das denn dann aussehen?

2.) Beginne das Hochladen.

Soll ich das per Javascript dann anstarten? Wie würde das denn dann aussehen.

4.) Frage alle x Sekunden beim Server an, wie groß der bereits hochgeladene Teil der Datei ist.

Wie würde das denn konkret aussehen?

6.) Simple Prozentrechnung und geeignete (grafische) Darstellung runden den Vorgang dann ab.

Das ist ja dann nur noch SchnickSchnack stellt denke ich kein Problem da

Serverseitig:

3.) Nimm die Datei entgegen.

Okay, weiß auch nicht, genau wie das aussehen soll. Würde mich über eine Erklärung zu dem MSDN Codebeispiel freuen.

5.) Ermittle jedesmal, wenn eine Anfrage nach der bereits hochgeladenen Größe eintrifft, die Größe des bereits hochgeladenen Teils der Datei und gib die Zahl zurück.

Wie sieht so eine Anfrage eig. aus in Javascript? Wie gehe ich dann mit der Anfage in ASP.NET um, wie sieht sowas aus?
________

KL

[EKKi]

Mahlzeit KL,

ich bin nach folgender Anleitung vorgegangen: Vielleicht könntest du mir auch anhand dieser Anleitung ein bisschen Erklären was ich machen muss:
Codebeispiel 1:
http://msdn.microsoft.com/de-de/library/aa479405.aspx#ID0EMC

Ich finde die Anleitung eigentlich relativ selbsterklärend. Was genau verstehst Du nicht?

1.) Ermittle die Größe der hochzuladenden Datei.
Wie geht das denn Clientseitig also über ASP.NET bekomme ich das hin?

Wie Der Martin bereits schrieb, ist die Ermittlung der Dateigröße *VOR* dem Upload allein mit Javascript nicht möglich. Ob ASP.NET entsprechende Spielereien bietet, weiß ich nicht (kenne mich mit .NET zu wenig aus).

Außerdem muss ich das FileUpload Element nicht irgendwie noch in ein UpdatePanel oder so stecken? Wie genau muss das denn dann aussehen?

Wie gesagt - .NET ist nicht so meine Baustelle. Aber ich denke, dass Deine Fragen sicherlich in einem geeigneten Tutorial beantwortet werden bzw. in einem .NET-spezifischen Forum gut aufhoben wären.

2.) Beginne das Hochladen.
Soll ich das per Javascript dann anstarten? Wie würde das denn dann aussehen.

Meistens beginnt man das Hochladen, indem ein [ref:html/formulare/datei_upload.htm#bereich@title=Formular, das Eingabeelement vom Typ "file" enthält], abgeschickt wird. Hat sich allgemein so eingebürgert.

4.) Frage alle x Sekunden beim Server an, wie groß der bereits hochgeladene Teil der Datei ist.
Wie würde das denn konkret aussehen?

<http://de.selfhtml.org/javascript/objekte/window.htm#set_timeout@title=Setze einen Timeout>, der dafür sorgt, dass alle x Sekunden eine Funktion aufgerufen wird, die z.B. mittels AJAX beim Server nachfragt, wie groß der bereits hochgeladene Teil ist. Die Rückmeldung (d.h. die Größe) müsstest Du dann auslesen und in geeigneter Form darstellen.

3.) Nimm die Datei entgegen.

Okay, weiß auch nicht, genau wie das aussehen soll. Würde mich über eine Erklärung zu dem MSDN Codebeispiel freuen.

Das sollte eigentlich genauso aussehen wie das Codebeispiel. Ein ganz normaler Dateiupload eben.

Wie sieht so eine Anfrage eig. aus in Javascript?

Im Normalfall handelt es dabei um eine einfache GET-Anfrage mittels AJAX.

Wie gehe ich dann mit der Anfage in ASP.NET um, wie sieht sowas aus?

Wie gehst Du denn normalerweise damit um, wenn jemand eine GET-Anfrage an ein .aspx-Skript stellt, das dann die Größe einer auf dem Server vorhandenen Datei feststellt und einfach ausgibt?

MfG,
EKKi