Share
Das asynchrone Hochladen von Dateien kann zu den besten Zeiten ein Schmerz sein. In Verbindung mit CodeIgniter kann dies jedoch besonders frustrierend sein. Ich habe endlich einen Weg gefunden, der nicht nur konstant funktioniert, sondern sich auch an das MVC-Muster hält. Lesen Sie weiter, um herauszufinden, wie!
Übrigens, Sie können einige nützliche CodeIgniter-Plugins und CodeScripts auf Envato Market finden. Schauen Sie also nach, was Sie für Ihr nächstes Projekt finden können.
In diesem Tutorial verwenden wir das PHP-Framework CodeIgniter, das JavaScript-Framework jQuery und das Skript AjaxFileUpload.
Es wird davon ausgegangen, dass Sie über gute Kenntnisse von CodeIgniter und jQuery verfügen, es ist jedoch keine vorherige Kenntnis von AjaxFileUpload erforderlich. Es wird auch davon ausgegangen, dass Sie bereits eine Installation von CodeIgniter eingerichtet haben.
Der Kürze halber wurde das Laden bestimmter Bibliotheken / Modelle / Helfer weggelassen. Diese sind im mitgelieferten Quellcode zu finden und gehören zum Standard.
Sie benötigen auch eine Datenbank und eine Tabelle namens Dateien. Die SQL zum Erstellen der Tabelle lautet:
Accentsconagua
CREATE TABLE 'files' ('id' int NOT NULL AUTO_INCREMENT PRIMARY KEY, 'Dateiname' varchar (255) NOT NULL, 'title' varchar (100) NOT NULL); Am Ende des Tutorials sollte Ihre Dateistruktur folgendermaßen aussehen (nicht gelagerte Ordner / Dateien werden weggelassen):
public_html /
-- Anwendung/
---- Steuerungen /
------ upload.php
---- Modelle /
------ files_model.php
---- Ansichten /
------ upload.php
------ files.php
-- css /
---- style.css
-- Dateien /
-- js /
---- AjaxFileUpload.js
---- site.js
Zuerst müssen wir unser Upload-Formular erstellen. Erstellen Sie einen neuen Controller, genannt hochladen, und rendern Sie in der Indexmethode die Ansicht hochladen.
Ihr Controller sollte so aussehen:
Klasse Upload erweitert CI_Controller öffentliche Funktion __construct () parent :: __ construct (); $ this-> load-> model ('files_model'); $ this-> load-> database (); $ this-> load-> helper ('url'); public function index () $ this-> load-> view ('upload'); Wir laden auch in das Dateimodell, sodass wir es in unseren Methoden verwenden können. Eine bessere Alternative könnte sein, sie automatisch in Ihr aktuelles Projekt zu laden.
Erstellen Sie Ihre Ansicht, upload.php. Diese Ansicht enthält unser Upload-Formular.
Datei hochladen
Vergiss nicht zu platzieren ajaxfileupload.js in js /.
Wie Sie sehen, laden wir oben in unsere Skripte. jQuery, AjaxFileUpload und unsere eigene js-Datei. Dies wird unser benutzerdefiniertes JavaScript enthalten.
Dann erstellen wir einfach ein Standard-HTML-Formular. In der leeren #files -Datei befindet sich unsere Liste der hochgeladenen Dateien.
Nur so sieht es nicht aus ziemlich So schlimm können wir unserer Datei ein paar grundlegende CSS hinzufügen style.css in css /.
h1, h2 font-family: Arial, serifenlos; Schriftgröße: 25px; h2 font-size: 20px; label Schriftfamilie: Verdana, serifenlos; Schriftgröße: 12px; Bildschirmsperre; Eingabe Auffüllen: 3px 5px; Breite: 250px; Marge: 0 0 10px; Eingabe [Typ = "Datei"] Padding-Left: 0; Eingabe [Typ = "Senden"] Breite: Auto; #files font-family: Verdana, serifenlos; Schriftgröße: 11px; #files strong font-size: 13px; #files a float: right; Marge: 0 0 5px 10px; #files ul list-style: none; Polsterung links: 0; #files li width: 280px; Schriftgröße: 12px; Polsterung: 5px 0; border-bottom: 1px fest #CCC;
Erstellen und öffnen site.js in js /. Geben Sie den folgenden Code ein:
$ (function () $ ('# upload_file'). submit (Funktion (e) e.preventDefault (); $ .ajaxFileUpload (url: './ upload / upload_file /', sicherheit: falsch, fileElementId: ' userfile ', dataType:' json ', data: ' title ': $ (' # title '). val (), success: Funktion (data, status) if (data.status! =' error ') $ ('# files'). html ('Dateien neu laden?
'); refresh_files (); $ ('# title'). val ("); alert (data.msg);;) false zurückgeben;);); Das JavaScript entführt das Formular und AjaxFileUpload übernimmt. Im Hintergrund erstellt er einen iframe und übermittelt die Daten über diesen.
Wir übergeben den Titelwert im Datenparameter des AJAX-Aufrufs. Wenn Sie weitere Felder im Formular hätten, würden Sie diese hier übergeben.
Wir prüfen dann unsere Rückgabe (die in JSON erfolgt). Wenn kein Fehler aufgetreten ist, aktualisieren wir die Dateiliste (siehe unten) und löschen das Titelfeld. Unabhängig davon alarmieren wir die Antwortnachricht.
Nun zum Hochladen der Datei. Die URL, die wir hochladen, ist / upload / upload_file /. Erstellen Sie also eine neue Methode in der hochladen Controller und fügen Sie den folgenden Code ein.
öffentliche Funktion upload_file () $ status = ""; $ msg = ""; $ file_element_name = 'Benutzerdatei'; if (leer ($ _ POST ['title'])) $ status = "error"; $ msg = "Bitte geben Sie einen Titel ein"; if ($ status! = "error") $ config ['upload_path'] = './files/'; $ config ['allowed_types'] = 'gif | jpg | png | doc | txt'; $ config ['max_size'] = 1024 * 8; $ config ['encrypt_name'] = TRUE; $ this-> load-> library ('upload', $ config); if (! $ this-> upload-> do_upload ($ dateielement_name)) $ status = 'error'; $ msg = $ this-> upload-> display_errors (","); else $ data = $ this-> upload-> data (); $ file_id = $ this-> files_model-> insert_file ($ data ['dateiname'], $ _POST ['title']); if ($ file_id) $ status = "success"; $ msg = "Datei erfolgreich hochgeladen"; else unlink ($ data ['full_path']); $ status = "Fehler"; $ msg = "Beim Speichern der Datei ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut."; @unlink ($ _ FILES [$ dateielementname]); echo json_encode (array ('status' => $ status, 'msg' => $ msg)); Dieser Code wird mit einer benutzerdefinierten Konfiguration in die CodeIgniter-Upload-Bibliothek geladen. Eine vollständige Referenz finden Sie in den CodeIgniter-Dokumenten.
Wir prüfen einfach, ob der Titel leer ist oder nicht. Ist dies nicht der Fall, laden wir die CodeIgniter-Upload-Bibliothek. Diese Bibliothek übernimmt für uns einen Großteil unserer Dateiprüfung.
Als Nächstes versuchen wir, die Datei hochzuladen. Wenn erfolgreich, speichern wir den Titel und den Dateinamen (werden über das zurückgegebene Datenarray übergeben)..
Vergessen Sie nicht, die temporäre Datei vom Server zu löschen und den JSON auszuwerten, damit wir wissen, was passiert ist.
Entsprechend dem MVC-Muster wird unsere DB-Interaktion von einem Modell gesteuert.
Erstellen files_model.php, und fügen Sie den folgenden Code hinzu:
Klasse Files_Model erweitert CI_Model öffentliche Funktion Einfügungsdatei ($ Dateiname, $ Titel) $ Data = Array ('Dateiname' => $ Dateiname, 'Titel' => $ Titel); $ this-> db-> insert ('files', $ data); return $ this-> db-> insert_id (); Wir sollten auch den Ordner erstellen, in den unsere Dateien hochgeladen werden. Erstellen Sie eine neue Datei in Ihrem Webstammverzeichnis Dateien, Stellen Sie sicher, dass es vom Server beschreibbar ist.
Nach einem erfolgreichen Upload müssen wir die Dateiliste aktualisieren, um die Änderung anzuzeigen.
Öffnen site.js Fügen Sie am Ende der Datei den folgenden Code hinzu, unter alles andere.
function refresh_files () $ .get ('./ upload / files /') .success (function (data) $ ('# files'). html (data);); Dies ruft einfach eine URL auf und fügt die zurückgegebenen Daten in eine ein div mit einer id von dateien.
Wir müssen diese Funktion beim Laden der Seite aufrufen, um die Dateiliste zunächst anzuzeigen. Fügen Sie dies in der Funktion Document Ready oben in der Datei hinzu:
refresh_files ();
Die URL, die wir zum Abrufen der Dateiliste aufrufen, lautet / upload / files /. Erstellen Sie daher eine neue Methode mit dem Namen Dateien, und in den folgenden Code einfügen:
öffentliche Funktionsdateien () $ files = $ this-> files_model-> get_files (); $ this-> load-> view ('files', array ('files' => $ files)); Eine ziemlich kleine Methode, wir verwenden unser Modell, um die aktuell gespeicherten Dateien zu laden und an eine Ansicht zu übergeben.
Unser Modell übernimmt den Abruf der Dateiliste. Aufmachen files_model.php, und fügen Sie in der get_files () Funktion.
public function get_files () return $ this-> db-> select () -> from ('files') -> get () -> result (); Ganz einfach: Wählen Sie alle in der Datenbank gespeicherten Dateien aus.
Wir müssen eine Ansicht erstellen, um die Liste der Dateien anzuzeigen. Erstellen Sie eine neue Datei mit dem Namen files.php, und füge folgenden Code ein:
Keine Dateien hochgeladen
Dies durchläuft die Dateien und zeigt deren Titel und Dateinamen an. Wir zeigen auch einen Link zum Löschen, der ein Datenattribut der Datei-ID enthält.
Um das Tutorial abzurunden, fügen wir die Funktionalität zum Löschen der Datei hinzu, auch mit AJAX.
Fügen Sie Folgendes in der Funktion Dokument bereit hinzu:
$ ('. delete_file_link'). live ('click', Funktion (e) e.preventDefault (); if (Bestätigen ('Möchten Sie diese Datei wirklich löschen?')) var link = $ (this ); $ .ajax (url: './upload/delete_file/' + link.data ('file_id'), Datentyp: 'json', success: function (data) files = $ (# files); if ( data.status === "success") link.parents ('li'). fadeOut ('fast', function () $ (this) .remove (); if (files.find ('li'). Länge == 0) files.html ('Keine Dateien hochgeladen
'); ); else alert (data.msg); ); ); Es ist immer eine gute Idee, beim Löschen von Informationen eine Bestätigung des Benutzers zu erhalten.
Wenn auf einen Link zum Löschen geklickt wird, wird ein Bestätigungsfeld angezeigt, in dem Sie gefragt werden, ob der Benutzer sicher ist. Wenn ja, rufen wir an / upload / delete_file, und wenn es erfolgreich ist, blenden wir es aus der Liste aus.
Wie oben ist die URL, die wir nennen / upload / delete_file /, So erstellen Sie die Methode Datei löschen, und fügen Sie den folgenden Code hinzu:
öffentliche Funktion delete_file ($ file_id) if ($ this-> files_model-> delete_file ($ file_id)) $ status = 'success'; $ msg = 'Datei erfolgreich gelöscht'; else $ status = 'error'; $ msg = 'Beim Löschen der Datei ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut.'; echo json_encode (array ('status' => $ status, 'msg' => $ msg)); Wieder lassen wir das Modell das schwere Heben ausführen und die Ausgabe wiederholen.
Wir sind jetzt am letzten Teil des Puzzles: unsere letzten beiden Methoden.
öffentliche Funktion delete_file ($ file_id) $ file = $ this-> get_file ($ file_id); if (! $ this-> db-> where ('id', $ file_id) -> delete ('files')) return FALSE; unlink ('./ files /'. $ file-> Dateiname); return TRUE; public function get_file ($ file_id) return $ this-> db-> select () -> from ('files') -> where ('id', $ file_id) -> get () -> row (); Da wir nur die ID übergeben, müssen wir den Dateinamen abrufen. Daher erstellen wir eine neue Methode zum Laden der Datei. Nach dem Laden löschen wir den Datensatz und entfernen die Datei vom Server.
Das ist es, Tutorial komplett! Wenn Sie es ausführen, sollten Sie in der Lage sein, eine Datei hochzuladen, anzuzeigen, dass sie angezeigt wird, und sie dann zu löschen. Alles ohne die Seite zu verlassen.
Offensichtlich können die Ansichten ein wenig hübsch sein, aber dieses Tutorial sollte Ihnen genug gegeben haben, um dies in Ihre Site integrieren zu können.
Diese Methode weist jedoch einige Mängel auf:
div beim Hochladen der Datei, anstatt sie vollständig zu ersetzen.Danke fürs Lesen!
