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, 777);
// 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…
Verwandte Beiträge:
YouTube Upload endlich via API verfügbar...
Ä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
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.