Share
Lasting av filer asynkront kan være en smerte i beste fall, men når det er koblet til CodeIgniter, kan det være en spesielt frustrerende opplevelse. Jeg fant endelig en måte som ikke bare fungerer konsekvent, men holder til MVC-mønsteret. Les videre for å finne ut hvordan!
Forresten, kan du finne noen nyttige CodeIgniter plugins og kodebeskrivelser på Envato Market, så ta en titt for å se hva du kan finne for ditt neste prosjekt.
I denne opplæringen bruker vi PHP-rammeverket CodeIgniter, JavaScript-rammeverket jQuery, og skriptet AjaxFileUpload.
Det antas at du har et arbeidskunnskap om CodeIgniter og jQuery, men ingen forkunnskaper om AjaxFileUpload er nødvendig. Det antas også at du allerede har en installasjon av CodeIgniter allerede satt opp.
For tydelighetens skyld er lastingen i enkelte biblioteker / modeller / hjelpere blitt utelatt. Disse finnes i kildekoden som følger med, og er ganske standard ting.
Du trenger også en database, og et bord som heter filer. SQL for å opprette tabellen er:
Accentsconagua
CREATE TABLE 'files' ('id' int IKKE NULL AUTO_INCREMENT PRIMARY KEY, 'filnavn' varchar (255) IKKE NULL, 'tittel' varchar (100) IKKE NULL); Ved slutten av opplæringen bør filstrukturen din se ut som denne (unnlatt mappe / filer):
public_html /
-- applikasjon/
---- kontrollere /
------ upload.php
---- modeller /
------ files_model.php
---- visninger /
------ upload.php
------ files.php
-- css /
---- style.css
-- filer /
-- JS /
---- AjaxFileUpload.js
---- site.js
Først må vi opprette vårt opplastingsskjema. Opprett en ny kontrollør, kalt laste opp, og i indeksmetoden, gjengi visningen laste opp.
Din kontroller skal se slik ut:
klassen Last opp strekker CI_Controller offentlig funksjon __construct () foreldre :: __ construct (); $ Dette-> last> modell ( 'files_model'); $ Dette-> last> database (); $ Dette-> last> helper ( 'url'); offentlige funksjonsindeks () $ this-> load-> view ('upload'); Vi laster også inn i filmodellen, så vi kan bruke den i våre metoder. Et bedre alternativ kan være å autoload det i ditt eget prosjekt.
Lag visningen din, upload.php. Denne visningen inneholder vårt opplastingsskjema.
Last opp fil
Ikke glem å plassere ajaxfileupload.js i js /.
Som du kan se, laster vi inn i våre skript øverst; jQuery, AjaxFileUpload og vår egen js-fil. Dette vil inneholde vår tilpassede JavaScript.
Da skaper vi bare et standard HTML-skjema. Den tomme #files div er der vår liste over opplastede filer vil være.
Bare så ser det ikke ut ganske så ille, la oss legge til noen grunnleggende CSS i filen vår style.css i css /.
h1, h2 font-family: Arial, sans-serif; skriftstørrelse: 25px; h2 font-size: 20px; etikett font-family: Verdana, sans-serif; skriftstørrelse: 12px; skjerm: blokk; inngang polstring: 3px 5px; bredde: 250px; margin: 0 0 10px; input [type = "file"] padding-left: 0; input [type = "submit"] width: auto; #files font-family: Verdana, sans-serif; skriftstørrelse: 11px; #files strong font-size: 13px; #files a float: right; margin: 0 0 5px 10px; #files ul listestil: none; polstring-venstre: 0; #files li width: 280px; skriftstørrelse: 12px; polstring: 5px 0; grensebunn: 1px solid #CCC;
Opprett og åpne site.js i js /. Legg inn følgende kode:
$ (funksjon () $ ('# upload_file'). submit (funksjon (e) e.preventDefault (); $ .ajaxFileUpload (url: './ upload / upload_file /', secureuri: false, fileElementId: ' userfile ', dataType:' json ', data: ' title ': $ (' # title ') .val (), suksess: funksjon (data, status) if (data.status! =' error ') $ ( '# filer'). html ('Last opp filer?
'); refresh_files (); $ ('# title') .val ("); varsel (data.msg);); return false;);); JavaScript hijacks skjemaet sende og AjaxFileUpload tar over. I bakgrunnen oppretter det en iframe og sender dataene via det.
Vi passerer over tittelverdien i dataparameteren til AJAX-anropet. Hvis du hadde flere felt i skjemaet, ville du sende dem her.
Vi sjekker deretter vår retur (som vil være i JSON). Hvis ingen feil oppsto, oppdaterer vi fillisten (se nedenfor), fjern tittelfeltet. Uansett, varsler vi svarmeldingen.
Nå på å laste opp filen. Nettadressen vi laster opp til, er / upload / upload_file /, så opprett en ny metode i laste opp kontrolleren, og legg inn følgende kode i den.
offentlig funksjon upload_file () $ status = ""; $ msg = ""; $ file_element_name = 'userfile'; hvis (tomt ($ _ POST ['title'])) $ status = "error"; $ msg = "Vennligst skriv inn en tittel"; hvis ($ status! = "feil") $ 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); hvis (! $ this-> upload-> do_upload ($ file_element_name)) $ status = 'error'; $ msg = $ this-> upload-> display_errors (","); ellers $ data = $ this-> upload-> data (); $ file_id = $ this-> files_model-> insert_file ($ data ['file_name'], $ _POST ['title']); hvis ($ file_id) $ status = "suksess"; $ msg = "Filen ble lastet opp"; else unlink ($ data ['full_path']); $ status = "error"; $ msg = "Noe gikk galt ved lagring av filen, prøv igjen."; @unlink ($ _ FILES [$ file_element_name]); echo json_encode (array ('status' => $ status, 'msg' => $ msg)); Denne koden lastes i CodeIgniter-opplastingsbiblioteket med en tilpasset konfigurasjon. For en fullstendig henvisning til det, sjekk ut CodeIgniter-dokumentene.
Vi gjør en enkel sjekk for å avgjøre om tittelen er tom eller ikke. Hvis det ikke er det, laster vi inn i CodeIgniter opplastingsbiblioteket. Dette biblioteket håndterer mye av vår filvalidering for oss.
Deretter prøver vi å laste opp filen. hvis vellykket lagrer vi tittelen og filnavnet (sendes inn via den returnerte datarammen).
Husk å slette tempfilen fra serveren, og ekk ut JSON slik at vi vet hva som skjedde.
I tråd med MVC-mønsteret blir vår DB-interaksjon håndtert av en modell.
Skape files_model.php, og legg til følgende kode:
klasse Files_Model utvider CI_Model public function insert_file ($ filnavn, $ tittel) $ data = array ('filnavn' => $ filnavn, 'title' => $ title); $ this-> db-> insert ('filer', $ data); returnere $ this-> db-> insert_id (); Vi bør også lage mappen våre filer vil bli lastet opp til. Opprett ny fil i webroten din filer, sørge for at den skrives av serveren.
Ved en vellykket opplasting må vi oppdatere fillisten for å vise endringen.
Åpen site.js og legg til følgende kode nederst på filen, under alt annet.
funksjonen refresh_files () $ .get ('./ upload / files /') .success (funksjon (data) $ ('# files'). html (data);); Dette kaller bare en URL og legger inn de returnerte dataene i en div med et id-fil.
Vi må ringe denne funksjonen på sidelasten for først å vise fillisten. Legg til dette i dokumentet klar funksjon øverst i filen:
refresh_files ();
Nettadressen vi ringer for å få fillisten er / opplasting / filer /, så opprett en ny metode som heter filer, og plasser i følgende kode:
offentlige funksjonsfiler () $ files = $ this-> files_model-> get_files (); $ this-> load-> view ('filer', array ('files' => $ filer)); Ganske en liten metode, bruker vi vår modell for å laste inn de lagrede filene og sende den videre til en visning.
Vår modell håndterer hentingen av fillisten. Åpne opp files_model.php, og legg til i get_files () funksjon.
offentlig funksjon get_files () return $ this-> db-> select () -> fra ('filer') -> get () -> resultat (); Ganske enkelt virkelig: velg alle filene som er lagret i databasen.
Vi må opprette en visning for å vise listen over filer. Opprett en ny fil, kalt files.php, og lim inn i følgende kode:
Ingen filer lastet opp
Dette løper gjennom filene og viser tittel og filnavn for hver. Vi viser også en slettekobling, som inkluderer et datatributt for fil-IDen.
For å avrunde opplæringen legger vi til funksjonaliteten for å slette filen, også ved hjelp av AJAX.
Legg til følgende i dokumentet klar funksjon:
$ ('. delete_file_link'). live ('klikk', funksjon (e) e.preventDefault (); hvis (bekreft ('Er du sikker på at du vil slette denne filen?')) var link = $ ); $ .ajax (url: './upload/delete_file/' + link.data ('file_id'), dataType: 'json', suksess: funksjon (data) files = $ (# files); data.status === "suksess") link.parents ('li'). fadeOut ('fast', funksjon () $ (dette) .remove (); hvis (files.find ('li'). lengde == 0) files.html ('Ingen filer lastet opp
'); ); ellers alert (data.msg); ); ); Det er alltid en god ide å få en brukerbekreftelse når du sletter informasjon.
Når en slettekobling klikkes, viser vi en bekreftelsesboks og spør om brukeren er sikker. Hvis de er, ringer vi til / Upload / delete_file, og hvis det lykkes, fader vi det fra listen.
Som ovenfor er nettadressen vi ringer til / Upload / delete_file /, så opprett metoden slett fil, og legg til følgende kode:
offentlig funksjon delete_file ($ file_id) if ($ this-> files_model-> delete_file ($ file_id)) $ status = 'suksess'; $ msg = 'Fil slettet vellykket'; else $ status = 'error'; $ msg = 'Noe gikk galt når du sletter filen, prøv igjen'; echo json_encode (array ('status' => $ status, 'msg' => $ msg)); Igjen, lar vi modellen gjøre tung løft, ekko ut utgangen.
Vi er nå på det siste stykket av puslespillet: våre to siste metoder.
offentlig funksjon delete_file ($ file_id) $ file = $ this-> get_file ($ file_id); hvis (! $ this-> db-> hvor ('id', $ file_id) -> slett ('filer')) return FALSE; fjernlink ('./ files /'. $ file-> filnavn); returnere SANT; offentlig funksjon get_file ($ file_id) return $ this-> db-> velg () -> fra ('filer') -> hvor ('id', $ file_id) -> get () -> rad Fordi vi bare sender ID, trenger vi å få filnavnet, så vi lager en ny metode for å laste filen. Når du er lastet, sletter vi posten og fjerner filen fra serveren.
Det er det, opplæringen er ferdig! Hvis du kjører det, bør du kunne laste opp en fil, se den vises, og deretter slette den. alt uten å forlate siden.
Visningene kan selvsagt gjerne gjøre noe, men denne opplæringen burde ha gitt deg nok til å kunne integrere dette på nettstedet ditt.
Det er imidlertid noen få feil i denne metoden:
div ved filopplasting, i stedet for å erstatte dem fullt ut.Takk for at du leste!
