jQuery Multiple File Upload – Web 2.0 PHP Tutorial


Ich habe mich gestern mal mit dem jQuery Plugin (Ich liebe jQuery) jQuery Multiple File Upload beschäftigt. Mit diesem Plugin ist es zwar nicht möglich Dateien hochzuladen, aber es ist möglich live (AJAX-like) ein Array zu erzeugen, in welches man mehrere Files speichern bzw. auswählen kann. Nun ist es so, dass der Hersteller bzw. Autor des Multi File Upload Plugin keinen Support für die Implementierung in den PHP Code anbietet. Da es von vielen aber scheinbar viele Fragen gibt, mache ich das jetzt mal just für euch…

Man baut das Plugin also einfach in seine Seite ein, indem man das entsprechende Javascript im Header einbindet und erzeugt ein Formularfeld. Wie das geht ist sicher klar, aber ich zeigs nochmal:

<script src="pfad/jquery.MultiFile.js" type="text/javascript"></script>
<input type="file" class="multi" name="upload[]" accept="gif|jpg|png"/>

Nun ist eigentlich schon alles erledigt. Das Plugin zumindest wird nun schon hervorragend laufen. Bei Fyneworks haben sich die Leute jedoch ein bisschen darüber beschwert, dass es das passende PHP Backend dazu nicht gibt. Deswegen liefere ich das mal nach. Man schickt das Formular also an eine Datei, welche folgendes beinhalten sollte:

foreach($_FILES["upload"]["name"] as $key => $value)
{
  if(($_FILES['upload']['type'][$key] == 'image/pjpeg' ||
      $_FILES['upload']['type'][$key] == 'image/jpeg' ||
      $_FILES['upload']['type'][$key] == 'image/gif' ||
      $_FILES['upload']['type'][$key] == 'image/jpg' ||
      $_FILES['upload']['type'][$key] == 'image/png' ||
      $_FILES['upload']['type'][$key] == 'image/x-png'))
  {
    // Zeitstempel festhalten
    $time_var=time();
    $file_tmp=$_FILES['upload']['tmp_name'][$key];
    $file_new='uploads/'.$time_var.'_'.$_FILES['upload']['name'][$key];    

    // Bild hochladen
    move_uploaded_file($file_tmp,$file_new);

    // Rechte setzen
    chmod($file_new, 0777);

    // z.B. Datenbankanbindung
    // mysql_query("blabla......");
  }
}

Und schon lädt man bequem und innerhalb eines Schritts mehrere Bilder auf den server und speichert diese sogar noch in der Datenbank. Ein super Plugin wie ich finde :)

Verbesserungsvorschlag? Dann schnell kommentieren…


Tags: , , , , ,
Kommentare

Hey… danke für die kurze Einführung ;-)

Funktioniert leider nicht so ganz, wie ich mir das vorstelle *hehe*

Als Fehlermeldung gibt es:

Notice: Undefined index: upload in /Applications/MAMP/htdocs/upload.php on line 20

Warning: Invalid argument supplied for foreach() in /Applications/MAMP/htdocs/upload.php on line 20

Und der dazugehörige PHP-Code:

foreach($_FILES[‚upload‘][’name‘] as $key => $value) {
$time_var = time();
$file_tmp = $_FILES[‚upload‘][‚tmp_name‘][$key];
$file_new = ‚images/events/‘.$time_var.’_‘.$_FILES[‚upload‘][’name‘][$key];
….. }

Und der HTML-Code + JS:

$(‚#fileUpload‘).MultiFile({
max: 3,
accept: ‚jpg‘,
STRING: {
remove: ‚Entfernen‘,
denied: ‚Es können nur .jpg Dateien hochgeladen werden‘
}
});

Vielleicht kannst du mir dabei behilflich sein ;-)
Denn wenn ich die Variable so aufrufe:

echo $_POST[‚upload‘][0];

gibt es keine Fehler ;) Aber nur der Name der Datei wird angezeigt.

HTML-Code wurde nicht angezeigt:

Hat sich erledigt ;-)

Der Form-Parameter > enctype=“multipart/form-data“ < fehlte!

Schönen Gruß.

Jo, alles latscho :)

Danke, da ich gerade ein Forum baue und die Nutzer sich dort Profilbilder hochladen können, habe ich gleich das hier mal genommen und funktioniert wunderbar.

Ja, freut mich…

Hallo,

vielen Dank für das kleine Tutorial. Habe mir den Uploader angeschaut und mich hat ein wenig gestört, dass es dort keinen PHP Beispielcode gab aber so ist das jetzt perfekt!

Hallo Markus,

erstens danke Dir sehr für das Beispiel. Ich kann leider keine Dokumente hochladen. Du hast gemeint, dass man Dein Script in eine Datei speichert. Bis jetzt habe ich folgendes gemacht:
[1] Das JQ-PlugIn von „jQuery Multiple File Upload“ heruntergeladen und installiert,
[2] PHP Datei erzeugt (index.php). Diese Datei enthält das Eingabefeld für Hochladen.
[3] ich habe dein Script in der index.php eingefügt.

Das habe ich bis jetzt alles gemacht. Die Datein werden bei mir nicht hoch geladen. Was ist der Nächste Schritt?

Kannst Du mir bitte weiter helfen? Dafür werde ich Dir dankbar sein.

MfG,
Samuel

Doofe Frage, aber hat Dein Uploadverzeichnis entsprechende Rechte (0777)?

hey – danke für die Erlkärung – ein solches Ding hab ich schon lange gesucht

Danke! Das hat mir gerade einiges an Arbeit erspart.

Hallo,

danke für die erklärung, nur die Zeile:

chmod($file_new, 777);

musste ich in

chmod($file_new, 0777);

ändern damit die rechte korrekt gesezt werden

chmod($file_new, 0777);

Das ist korrekt. Da hat sich ein Tippfehler eingeschlichen. Artikel korrigiert. Danke :)

hallo,

wie muss ich denn eine file size abfrage lösen? ich benötige eine abfrage, die nur eine bestimmt größe zulässt und im falle einer größeren datei, die fehlermeldung beim file upload field ausgibt und diese datei auch nicht speichert, solange sie nicht in der angegebenen norm liegt?

Einfach die if Abfrage mit folgenden Code ergänzen (z.B. für Bilder mit einer Auflösung von 1024 x 768 Pixel):

$_FILES[‚upload‘][’size‘][$key] == <= 768*1024

super, danke. und wie gebe ich an einer beliebigen position im formular die fehlermeldung aus, wenn es nicht passt?

gibt es auch eine lösung, dass ich das file (welches unterhalb des upload feldes angezeigt wird) nicht verliere, wenn ich die seite aufgrund einer validierung reloade?
Ich möchte die datei erst schreiben, wenn das file tatsächlich abgeschickt wurde.

danke

@Michael:

zu 1:
Du kannst nach der if-Anweisung einfach ein else anhängen und die Fehlermeldung per echo Ausgeben, oder setzt vor der Abfrage z.B. eine Variable $error gleich null, sobald ein Fehler auftritt, setzt Du diese gleich eins und gibst den Fehler aus.

zu 2:
Was willst Du denn da Validieren?

nun das formular wird serverseitig validiert. bei submit lädt sich das formular also selber. dabei verschwinden aber die uploads.

Stehe gerade irgendwie auf dem Schlauch. Wenn das Formular submitted wird, sind die Uploads nicht weg, sondern in der Variablen bzw. dem angegebenen Array…

ja, das ist richtig. ich meine sie werden bei den upload fields nicht mehr angezeigt und man könnte oder wird dazu verleitet neue dateien zu attachen.

Achso…

Ja gut, das ist klar. Das jQuery Plugin wird halt einmal durchlaufen und ist nach dem Submitten natürlich wieder „clean“. Das ganze läuft ja clientseitig ab.

Du hast prinzipiell zwei Möglichkeiten. Entweder bastelst Du Dir eine kleine Javascript-Funktion, die nach dem Submitten schon hochgeladene Dateien wieder anzeigt bzw. preselected, oder Du gibst einfach eine Liste der bereits hochgeladenen Dateien per PHP aus und setzt diese direkt unter das Upload-Field. Dem User würde es bei verwendung identischer CSS Styles sicher nicht auffallen.

Was ich noch nicht ganz verstehe ist, was das alles bringen soll. Warum validierst Du nicht während des Uploads oder schon on-the-fly via Javascript? Dann würdest Du diesen Reload doch gar nicht erst benötigen…

da ich die javascript validierung umgehen kann, habe ich mich für die serverseitige variante mit php entschieden.
vilen dank für deine tipps. werden wohl die php variante mal austesten

hai, super anleitung und nettes tool.

frage: ich suche etwas mit dem ich relativ zügig mehrere hundert dateien (bilder) so verarbeiten kann.
idealerweise wähle ich einen ordner aus und nicht jedes file einzeln durch klick auf „durchsuchen“.

hast du da ne idee/lösung?

helmut

Mit einem Klick auf „Durchsuchen…“ ist das Auswählen eines Ordners leider nicht möglich. Man kann immer nur einzelne Dateien auswählen.

Bei mehreren hundert Bildern würde ich daraus ein ZIP Archiv basteln, das Archiv dann hochladen und es serverseitig entpacken. Wie man mittels PHP mit ZIP Archiven umgeht, steht hier: http://de.php.net/manual/de/ref.zip.php

Als Alternative fällt mir zum einen nur noch das rekursive auslesen eines Verzeichnisses ein, um danach die Dateien einzeln mittels Schleife hochzuladen. Das Problem hierbei wäre nur, dass die Dateien bereits auf einem Server liegen müssten, den man per IP o.ä. ansprechen kann.

Zum anderen lasse ich mal das Stichwort FTP hier liegen :)

Hey, hört sich ja Klasse an. Obwohl so einfach und gut beschrieben bekomme ich die Sache einfach nicht zum laufen. Vielleicht hast Du eine Ahnung woran es scheitern könnte?

1. index.php erstellt diese enthält zu Beginn Deinen php Teil und darunter einen Html Teil (samt Head mit eingebundener js mulit-up library):

(Brauche ich einen submit button?)

2. Verzeichnis uploads erstellt. CHMOD 777.

Leider funktioniert die Sache weder auf meinem lokalen apache, noch online.

Über Hilfe dankbar,

grüße,

toni

@Toni

Ja, du brauchst einen Submit-Button, der die ID trägt, mittels dieser du den Werdegang anstößt.

Ein Submit-Button, der eine ID trägt? Was soll das denn bedeuten?
Die Bilder selbst liegen im Array „upload“. Wie man jetzt submitted ist a) egal und benötigt b) keine IDs, die von irgendwem „getragen“ werden…

Tag :)
Klappt soweit alles.
Nur ich bin gerade am grubeln wegen dem mysql_query.
Reicht es da wenn ich einfach nur das $_FILES[‚upl‘] in den mysql_query schreibe?

Naja, das wäre ja das gesamte Array. Ich habe u.a. den Filename in der SQL gespeichert, also:

$time_var.’_‘.$_FILES[‚upload‘][’name‘][$key]

So.
Ich habs gerade mal gemacht, aber er speichert mir nur einmal das bild in der datenbank.
Ich wollte aber das er mir alle Bilder in die DB speichert.
Könntest du mir da einen rat geben`?

Ping- & Trackbacks

[…] Da das Plugin leider über keinen Konnektor in php verfügt, möchte ich noch auf den Artikel von Blogwave verweisen. Hier wird erklärt, wie man Multiple-Uploads mit php […]

[…] […]

Kommentar abgeben

(notwendig)

(notwendig)