Beitrag erstellt am
9. September 2008
unter Web 2.0.
Hier kannst Du die Kommentare per RSS 2.0 abonieren.
Du kannst entweder einen Kommentar oder einen Trackback von Deiner eigenen Seite hinterlassen.
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…
Keine verwandten BeiträgeÄhnliche Artikel bereitgestellt von Yet Another Related Posts Plugin.
Kommentare
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.
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
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… 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.