Share
Uppladdning av filer asynkront kan vara en smärta i bästa tider, men när det kombineras med CodeIgniter kan det vara en särskilt frustrerande upplevelse. Jag hittade äntligen ett sätt som inte bara fungerar konsekvent utan håller till MVC-mönstret. Läs vidare för att få reda på hur!
Förresten kan du hitta några användbara CodeIgniter-plugins och kodskript på Envato Market, så ta en titt på vad du kan hitta för ditt nästa projekt.
I denna handledning använder vi PHP Framework CodeIgniter, JavaScript Framework jQuery och manuset AjaxFileUpload.
Det antas att du har en fungerande kunskap om CodeIgniter och jQuery, men ingen tidigare kunskap om AjaxFileUpload är nödvändig. Det antas också att du redan har en installation av CodeIgniter redan upprättad.
För korthetens skull har laddningen i vissa bibliotek / modeller / hjälpare utelämnats. Dessa kan hittas i källkoden som medföljer, och är ganska vanliga saker.
Du behöver också en databas och ett bord som heter filer. SQL för att skapa tabellen är:
Accentsconagua
CREATE TABLE 'files' ('id' int INTE NULL AUTO_INCREMENT PRIMARY KEY, 'filnamn' varchar (255) INTE NULL, 'titel' varchar (100) INTE NULL); I slutet av handledningen borde din filstruktur se ut som den här (om du lämnar oskadade mappar / filer):
public_html /
-- Ansökan/
---- controllers /
------ upload.php
---- modeller /
------ files_model.php
---- visningar /
------ upload.php
------ files.php
-- css /
---- style.css
-- filer /
-- js /
---- AjaxFileUpload.js
---- site.js
Först måste vi skapa vårt uppladdningsformulär. Skapa en ny kontrollör, kallad ladda upp, och i indexmetoden, gör visningen ladda upp.
Din controller ska se ut så här:
klassuppladdning utökar CI_Controller public function __construct () förälder :: __ construct (); $ This-> last> modell (files_model '); $ This-> last> databas (); $ This-> last> hjälpare (url); offentliga funktionsindex () $ this-> load-> view ('upload'); Vi laddar också i filmodellen, så vi kan använda den i våra metoder. Ett bättre alternativ kan vara att autoload det i ditt faktiska projekt.
Skapa din vy, upload.php. Den här vyn kommer att innehålla vårt uppladdningsformulär.
Ladda upp fil
Glöm inte att placera ajaxfileupload.js i js /.
Som ni kan se laddas vi i våra skript längst upp; jQuery, AjaxFileUpload och vår egen js-fil. Detta kommer att rymma vår anpassade JavaScript.
Då skapar vi helt enkelt en vanlig HTML-form. Den tomma #files-diven är där vår lista över uppladdade filer kommer att vara.
Bara så ser det inte ut ganska så dåligt, kan vi lägga till några grundläggande CSS i vår fil style.css i css /.
h1, h2 font-family: Arial, sans-serif; typsnittstorlek: 25px; h2 font-size: 20px; etikett font-family: Verdana, sans-serif; fontstorlek: 12px; display: block; inmatning padding: 3px 5px; bredd: 250px; marginal: 0 0 10px; inmatning [typ = "fil"] padding-left: 0; inmatning [typ = "submit"] width: auto; #files font-family: Verdana, sans-serif; typsnittstorlek: 11px; #files strong font-size: 13px; #files a float: right; marginal: 0 0 5px 10px; #files ul list-style: none; padding-left: 0; #files li width: 280px; fontstorlek: 12px; vaddering: 5px 0; border-bottom: 1px solid #CCC;
Skapa och öppna site.js i js /. Placera följande kod:
$ (funktion () $ ('# upload_file'). Skicka (funktion (e) e.preventDefault (); $ .ajaxFileUpload (url: './ upload / upload_file /', secureuri: false, fileElementId: ' användarfilen ', dataType:' json ', data: ' title ': $ (' # title ') .val (), framgång: funktion (data, status) if (data.status! =' error ') $ ( '# filer'). html ('Ladda om filer?
'); refresh_files (); $ ('# title') .val ("); alert (data.msg);); return false;);); JavaScript-kapaciteten skickar formuläret och AjaxFileUpload tar över. I bakgrunden skapar den en iframe och skickar data via det.
Vi passerar över titelvärdet i dataparametern för AJAX-samtalet. Om du hade några fler fält i formuläret, skulle du skicka dem här.
Vi kontrollerar då vår retur (som kommer att finnas i JSON). Om inget fel uppstått uppdaterar vi fillistan (se nedan), raderar titelfältet. Oavsett, vi vaknar svarmeddelandet.
Nu på att ladda upp filen. Webbadressen vi laddar upp till är / upload / upload_file /, så skapa en ny metod i ladda upp controller och placera följande kod i den.
allmän funktion upload_file () $ status = ""; $ msg = ""; $ file_element_name = 'userfile'; om (tomt ($ _ POST ['title'])) $ status = "error"; $ msg = "Vänligen ange en titel"; om ($ 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); om (! $ this-> upload-> do_upload ($ file_element_name)) $ status = 'error'; $ msg = $ this-> upload-> display_errors (","); annat $ data = $ this-> upload-> data (); $ file_id = $ this-> files_model-> insert_file ($ data ['filnamn'], $ _POST ['title']); om ($ file_id) $ status = "success"; $ msg = "Fil som har laddats upp"; else unlink ($ data ['full_path']); $ status = "error"; $ msg = "Något gick fel när du sparade filen, försök igen."; @unlink ($ _ FILES [$ file_element_name]); echo json_encode (array ('status' => $ status, 'msg' => $ msg)); Koden laddas i CodeIgniter-uppladdningsbiblioteket med en anpassad konfiguration. För en fullständig hänvisning till det, kolla in CodeIgniter-dokumenten.
Vi gör en enkel kontroll för att avgöra om titeln är tom eller inte. Om det inte är laddat vi in i CodeIgniter uppladdningsbiblioteket. Detta bibliotek hanterar mycket av vår filvalidering för oss.
Därefter försöker vi ladda upp filen. om vi lyckas sparar vi titeln och filnamnet (skickas in via den returnerade datarrayen).
Kom ihåg att ta bort tempfilen från servern och echo ut JSON så vi vet vad som hände.
I enlighet med MVC-mönstret kommer vår DB-interaktion att hanteras av en modell.
Skapa files_model.php, och lägg till följande kod:
class Files_Model utökar CI_Model public function insert_file ($ filnamn, $ title) $ data = array ('filnamn' => $ filnamn, 'title' => $ title); $ this-> db-> insert ('files', $ data); returnera $ this-> db-> insert_id (); Vi borde också skapa den mapp som våra filer kommer att laddas upp till. Skapa en ny fil i din webbrot kallad filer, se till att det är skrivbart av servern.
Vid en lyckad uppladdning måste vi uppdatera fillistan för att visa ändringen.
Öppna site.js och lägg till följande kod längst ner i filen, under allt annat.
funktionen refresh_files () $ .get ('./ upload / files /') .success (funktion (data) $ ('# files'). html (data);); Detta kallar helt enkelt en URL och sätter in den returnerade data i en div med ett id-fil.
Vi måste ringa den här funktionen på sidbelastningen för att visa fillistan. Lägg till detta i dokumentklarfunktionen högst upp i filen:
refresh_files ();
Webbadressen vi ringer för att få fillistan är / upload / files /, så skapa en ny metod som heter filer, och placera i följande kod:
offentliga funktionsfiler () $ files = $ this-> files_model-> get_files (); $ this-> load-> view ('files', array ('filer' => $ filer)); En ganska liten metod använder vi vår modell för att ladda in de sparade filerna och överföra den till en vy.
Vår modell hanterar hämtningen av fillistan. Öppna files_model.php, och lägg till i get_files () fungera.
public function get_files () return $ this-> db-> select () -> från ('filer') -> get () -> resultat (); Ganska enkelt verkligen: Välj alla filer som lagras i databasen.
Vi måste skapa en vy för att visa listan över filer. Skapa en ny fil, kallad files.php, och klistra in i följande kod:
Inga filer laddade upp
Det här loopar genom filerna och visar titel och filnamn för varje. Vi visar också en raderingslänk, som innehåller en dataattribut för fil-id.
För att avsluta handledningen lägger vi till funktionaliteten för att radera filen, även med AJAX.
Lägg till följande i dokument redo funktionen:
$ ('. delete_file_link'). live ('klicka', funktion (e) e.preventDefault (); om (bekräfta ('Är du säker på att du vill radera den här filen?')) var länk = $ ); $ .ajax (url: './upload/delete_file/' + link.data ('file_id'), dataType: 'json', framgång: funktion (data) files = $ (# files); data.status === "framgång") link.parents ('li'). fadeOut ('fast', funktion () $ (detta) .remove (); om (files.find ('li'). längd == 0) files.html ('Inga filer laddade upp
'); ); annars alert (data.msg); ); ); Det är alltid en bra idé att få en användarbekräftelse när du tar bort information.
När en länk raderas klickar vi på en bekräftelsebox som frågar om användaren är säker. Om de är, ringer vi till / Uppladdning / delete_file, och om det lyckas vi bleknar det från listan.
Som ovan är den URL vi ringer till / Uppladdning / delete_file /, så skapa metoden radera fil, och lägg till följande kod:
offentlig funktion delete_file ($ file_id) if ($ this-> files_model-> delete_file ($ file_id)) $ status = 'success'; $ msg = 'Filen har tagits bort'; else $ status = 'error'; $ msg = 'Något gick fel när du tog bort filen, var god försök igen'; echo json_encode (array ('status' => $ status, 'msg' => $ msg)); Återigen låter vi modellen göra den tunga lyftningen, echoing outputen.
Vi är nu på den sista pusselbiten: våra sista två metoder.
offentlig funktion delete_file ($ file_id) $ file = $ this-> get_file ($ file_id); om (! $ this-> db-> where ('id', $ file_id) -> delete ('files')) returnera FALSE; avmarkera ('./ files /'. $ file-> filnamn); returnera TRUE; public function get_file ($ file_id) return $ this-> db-> select () -> från ('filer') -> var ('id', $ file_id) -> get () -> rad Eftersom vi bara skickar ID måste vi hämta filnamnet, så vi skapar en ny metod för att ladda filen. En gång laddad tar vi bort posten och tar bort filen från servern.
Det är det, handledning slutförd! Om du kör det ska du kunna ladda upp en fil, se den visas och ta bort den, allt utan att lämna sidan.
Självklart kan synpunkterna göra vissa pretty upp, men den här handledningen borde ha gett dig tillräckligt för att kunna integrera detta på din webbplats.
Det finns dock några brister i denna metod:
div vid filuppladdning, istället för att helt ersätta dem.Tack för att du läser!
