Wie funktioniert der Mehrfach-Bilderupload bei SchuelerVZ o. StudiVZ?

[MaxXx007]

Hallo,
ich versuche derzeit mit PHP ein Admin-Tool für Bildergalerien zu programmieren, dabei stehe ich jedoch vor folgendem Problem: beim Erstellen einer neuen Galerie soll der Nutzer mehrere Bilder gleichzeitig (in einem "Durchsuchen-Fenster" mit Shift oder Strg) zum Upload auswählen können und nicht alle einzeln.
Ich hab überall im Internet nach einer Lösung gesucht aber nix gefunden (ich möchte kein Java-Applet benutzen, bspw. jupload) ...
Aber wer SchülerVZ oder StudiVZ kennt, weiß dass man da beim erstellen eines neuen Foto-Albums einfach auf "Fotos hinzufügen" klicken kann und mehrere Fotos aufeinmal auswählen kann. Anscheinend ist das eine Flash-Anwendung, aber leider hab ich von Flash nich wirklich Ahnung...
Deswegen weiß ich auch nich ob das eher was einfach zu programmierendes oder ein kompliziertes Skript ist.

Vielen Dank für alle Hilfe!

Max

 

[BuzzGo]

Kurz und knapp:

http://www.php-manual.net/features.file-upload.multiple.html

 

[MaxXx007]

erstmal Danke für die Antwort, die Möglichkeit kenn ich aber schon, is aber nich das was ich möchte, denn es is ja nicht wirklich benutzerfreundlich, 60 Bilder einzeln anzuklicken... (das Ganze soll Teil eines kleinen CMS werden)

Im SchülerVZ kann man in einem Öffnen-Dialogfenster mehrere Bilder auswählen die dann in einer liste angezeigt werden und man dann mit einem Klick auf einen Button nacheinander hochgeladen werden ohne das die seite sich aktualisiert (in den einzelnen Listenfeldern wird ein Ladebalken angezeigt).
Das einzige Flash-Element scheint aber der "Fotos hinzufügen", zumindest ist nur dort der Flashplayer aktiv. Wie die "X" Löschen-Button in der Liste neben den Bildern ohne Flash funktionieren weiß ich nicht.
Hab zum besseren Verständis noch 2 Screenshots:
--->


Max

 

[QXARE]

Wird dann wohl ne AJAX Lösung sein.

 

[Fatal Error]

ajax xD? und wie bekommst du den auswahl dialog mit dem du mehrere dateien auswählen kannst?
das wird ganz sicher flash sein. du kannst auch mit flash wiederrum javascript aufrufen, hier wird einfach für jede datei dann im html eine input box erzeugt. irgendwie komisch, das kann man dann doch gleich ganz mit flash machen.

 

[MaxXx007]

Danke für eure Antworten.
Wie gesagt hab ich mich mit Flash bisher noch nicht wirklich befasst...
Könnte mir jemand sagen wie manso ein mehrfach-auswahl-dialog erzeugt und die daten daraus verarbeitet?
ich guck mir derweile mal die grundlagen von Flash an

Max

 

[QXARE]

Ich kann mir nicht vorstellen dass das Flash sein soll. Die Oberfläche sieht doch genau so wie von Vista aus... Schau doch mal den Quelltext der Seite an, dann siehst um was es sich handelt.

 

[MaxXx007]

also nun beim 3. Mal Quelltext anschaun hab ichs dann eindeutig gesehen - es ist auf jeden Fall Flash...aber nich alles, anscheinend nur der "Fotos hinzufügen"-Button, denn da wird eine swf-Datei eingebunden. Aber die Liste auf jeden Fall nich und der Hochladen-Button is ein Link...

Hier mal der Auswahl-Quelltext:

<div style="display: block;" id="flashUpload">
            <p class="choosePhotoText">Hier kannst du bis zu 100 Fotos (JPG, GIF oder PNG) gleichzeitig hochladen.</p>
            <p class="addPhotoText">Klicke auf "Fotos hinzufügen" und wähle ein oder <strong>mehrere Fotos auf einmal</strong> zum Hochladen aus!</p>       
            <p style="display: none;" class="queueerror error">Du hast mehr als 100 Fotos auf einmal ausgewählt, das schafft der Foto-Lader leider nicht!</p>
            <p style="display: block;" class="quitebighelp-single"><strong>Eines der ausgewählten Fotos ist größer als 1,5 MB. Da dauert das Hochladen etwas länger...</strong><br>Wenn's schneller gehen soll, kannst du es auch verkleinern. [<a href="/l/help/1/#resize-image" target="_blank">Wie geht das?</a>]</p>

            <p style="display: none;" class="quitebighelp-multi"><strong>Einige der ausgewählten Fotos sind größer als 1,5 MB. Da dauert das Hochladen etwas länger...</strong><br>Wenn's schneller gehen soll, kannst du sie auch verkleinern. [<a href="/l/help/1/#resize-image" target="_blank">Wie geht das?</a>]</p>
    
            <div class="list clearfix"><div class="item clearfix"><div class="box"><div class="label">avi.jpg</div><a class="close"></a><div class="progress"></div></div><div class="size">251 KB</div></div><div class="item clearfix"><div class="box"><div class="label">IMG_3465.JPG</div><a class="close"></a><div class="progress"></div></div><div class="size">2328 KB - sehr große Datei</div></div></div>
    
            <form class="form clearfix" action="" method="post" enctype="multipart/form-data">
                <div class="select clearfix"><object id="SWFUpload_0" type="application/x-shockwave-flash" data="../../Flash/swfupload.swf?swfuploadrnd=42900923" class="swfupload" width="196" height="18"><param name="wmode" value="window"><param name="movie" value="../../Flash/swfupload.swf?swfuploadrnd=42900923"><param name="quality" value="high"><param name="menu" value="false"><param name="allowScriptAccess" value="always"><param name="flashvars" value="movieName=SWFUpload_0&amp;uploadURL=http%3A%2F%2Fwww.schuelervz.net%2FPhotos%2FAddPhotos%2F8da264962a3a9fe4&amp;useQueryString=false&amp;requeueOnError=false&amp;httpSuccess=&amp;params=albumId%3D8da264962a3a9fe4%26amp%3BuserId%3De72a603679a72bed%26amp%3BsessionId%3D841e25f7f06d3b7c9eba4b02faeb7d9f245aa768%26amp%3Bformkey%3D2447fa09b94cad55c595d0da33d29b5ae3f7bd1f4fc64290021aede1e623fafb1d29b05abae3af9012dad8de15049c80188fc57bb4e4f70651da344c450f0c1b66f28d312b0a972cd7cd0d3f022dde36141334162fcffca61230c1473cf1cead612cbd9bd21a68e1e4cbc1d445eb4e82%26amp%3Biv%3D81092aec77990610d9949f239ee0b74d%26amp%3BautoCaptionIgnore%3Doff&amp;filePostName=Filedata&amp;fileTypes=*.jpg%3B%20*.jpeg%3B%20*.gif%3B%20*.png&amp;fileTypesDescription=Fotos&amp;fileSizeLimit=500%20MB&amp;fileUploadLimit=1000&amp;fileQueueLimit=100&amp;debugEnabled=false&amp;buttonImageURL=..%2F..%2FImg%2Fswfupload_bg.png&amp;buttonWidth=196&amp;buttonHeight=18&amp;buttonText=%3Cspan%20class%3D%22upbtn%22%3EFotos%20hinzuf%C3%BCgen%3C%2Fspan%3E&amp;buttonTextTopPadding=0&amp;buttonTextLeftPadding=3&amp;buttonTextStyle=.upbtn%20%7B%20font-family%3ATahoma%2CVerdana%2CArial%2CHelvetica%2Csans-serif%3B%20font-size%3A11px%3B%20color%3A%23dc1e64%20%7D&amp;buttonAction=-110&amp;buttonDisabled=false&amp;buttonCursor=-1"></object></div>
    
                <div class="flashtext">

                    <span class="mimelabel">Fotos</span>
                    <span class="mimetypes">*.jpg; *.jpeg; *.gif; *.png</span>
                    <span class="success">Erfolgreich hochgeladen!</span>
                    <span class="tobig">Zu groß!</span>
                    <span class="quitebig">sehr große Datei</span>
                    <span class="unload-run">Wenn du die Seite verlässt, wird das Hochladen der Fotos abgebrochen. Möchtest du das wirklich?</span>

                    <span class="unload-queued">Wenn du die Seite verlässt, wird die Liste der vorgemerkten Fotos gelöscht. Möchtest du das wirklich?</span>
                    <span class="all-done-head">Die Fotos wurden erfolgreich hochgeladen.</span>
                    <span class="all-done-content">Möchtest du die Fotos jetzt bearbeiten?</span>
                    <a class="buttoncolor" href="#"></a>
                </div>
    
                <p style="display: block;" class="captionswitch">
                    <input name="autoCaptionIgnore" id="autoCaption" value="on" type="checkbox">

                    <label for="autoCaption">Benutze Dateinamen als Titel</label>
                </p>
    
                <div class="buttonbar clearfix">
                        <a style="display: inline;" href="#" class="link-face-button upload">Fotos hochladen</a>
                        <a style="display: none;" href="#" class="link-face-button cancel">Hochladen abbrechen</a>
                        <a style="display: none;" href="/Photos/EditPhotos/8da264962a3a9fe4" class="link-face-button edit">Fotos bearbeiten</a>
                </div>
    
                <input name="albumId" value="8da264962a3a9fe4" type="hidden">

                <input name="userId" value="e72a603679a72bed" type="hidden">
                <input name="sessionId" value="841e25f7f06d3b7c9eba4b02faeb7d9f245aa768" type="hidden">
                <input name="formkey" value="2447fa09b94cad55c595d0da33d29b5ae3f7bd1f4fc64290021aede1e623fafb1d29b05abae3af9012dad8de15049c80188fc57bb4e4f70651da344c450f0c1b66f28d312b0a972cd7cd0d3f022dde36141334162fcffca61230c1473cf1cead612cbd9bd21a68e1e4cbc1d445eb4e82" type="hidden">
<input name="iv" value="81092aec77990610d9949f239ee0b74d" type="hidden">

            </form>
            <p>Mit dem Hochladen versicherst du, dass du <strong>keine Rechte Dritter, insbesondere Urheberrechte und das Recht am eigenen Bild, verletzt.</strong> Das Foto darf <strong>nicht dem <a href="/l/rules" target="_blank">schülerVZ-Verhaltenskodex</a> widersprechen.</strong></p>

            <p class="legacy">
                Du suchst den <a href="/Photos/FormLoader/8da264962a3a9fe4">[Foto-Lader aus Omas Zeiten]</a>?<br>
            </p>
        </div>

 

[beten]

Hey.
Vllt machste mal nen paar Zeilenumbrüche in deinen eingefügten Code. Is schwer unleserlich und man muss viel scrollen

Aber das hier hilft dir eventuell weiter
swfupload
zugehörige Demo

Gruß

 

[hurga_gonzales]

Hi,

ich habs mir nun nicht angesehen, aber es ist mit Sicherheit (Deinem Snippet nach) eine Flex-Anwendung.

- Frontend mit Bilderauswahl ist in Flex (Adobe Flash) geschrieben
- Verarbeitung findet über ein server-seitiges Template (z.B. upload.php oder upload.cfm) statt

Ich hab mir jedenfalls genau so einen Mulitfile-Upload in Flex geschrieben und die Verarbeitung mache ich mit einem server-seitigen Skript auf Cold Fusion (oder RAILO) Basis.

Der große Vorteil dabei ist:
- Dateigrößen client-seitig prüfen und begrenzen
- Dateitypen client-seitig prüfen und begrenzen
- User kann beliebig viele Dateien auf einmal auswählen

Ich war es einfach leid, immer nur einzelne Dateien hochladen zu können und vor allem die Validierung erst nach dem Upload (was bei großen Dateien echt nervig ist) durchführen zu können.

Schüss
Hurga

 

[MaxXx007]

Vielen Dank beten!
Das is auf jeden Fall das richtige.
Aber leider brauch man für die Installation und Konfiguration ziemlich tiefgreifende Javascript-Kenntnisse die ich nich habe, da ich bisher verucht habe, alles mit PHP zu machen....
Gibt leider auch keine richtige Anleitung zu Installation...
Also bis das bei läuft wird wahrscheinlich noch einige Zeit vegehen.

Max

Ergänzung (25. Juli 2009)

Nochmal ganz vielen Dank für den Tipp, beten!!!

funktioniert jetzt perfekt.

naja dann bis zum nächsten Mal

Max