Share
Het asynchroon uploaden van bestanden kan in de beste tijden lastig zijn, maar in combinatie met CodeIgniter kan het een bijzonder frustrerende ervaring zijn. Ik heb eindelijk een manier gevonden die niet alleen consistent werkt, maar zich ook aan het MVC-patroon houdt. Lees verder om erachter te komen hoe!
Overigens vindt u een aantal handige CodeIgniter-plug-ins en codeяscripts op Envato Market, dus u hoeft alleen maar te bladeren om te zien wat u kunt vinden voor uw volgende project.
In deze tutorial gebruiken we de PHP framework CodeIgniter, het JavaScript framework jQuery en het script AjaxFileUpload.
Er wordt verondersteld dat je een goede kennis hebt van CodeIgniter en jQuery, maar geen voorkennis van AjaxFileUpload is noodzakelijk. Er wordt ook aangenomen dat u al een installatie van CodeIgniter al hebt ingesteld.
Kortheidshalve is het laden van bepaalde bibliotheken / modellen / helpers achterwege gelaten. Deze zijn te vinden in de geleverde broncode en zijn vrij standaarddingen.
Je hebt ook een database en een tabel nodig bestanden. De SQL om de tabel te maken is:
Accentsconagua
MAAK TABLE 'files' ('id' int NOT NULL AUTO_INCREMENT PRIMARY KEY, 'bestandsnaam' varchar (255) NOT NULL, 'title' varchar (100) NOT NULL); Aan het einde van de zelfstudie zou uw bestandsstructuur er ongeveer hetzelfde uit moeten zien (weglaten van onveranderde mappen / bestanden):
public_html /
-- toepassing/
---- controllers /
------ upload.php
---- modellen /
------ files_model.php
---- keer bekeken/
------ upload.php
------ files.php
-- css /
---- style.css
-- bestanden /
-- js /
---- AjaxFileUpload.js
---- site.js
Eerst moeten we ons uploadformulier maken. Maak een nieuwe controller, genaamd uploaden, en render de weergave in de indexmethode uploaden.
Uw controller zou er als volgt uit moeten zien:
class Upload breidt CI_Controller uit public function __construct () parent :: __ construct (); $ This-> load-> model ( 'files_model'); $ This-> load-> databank (); $ This-> load-> helper ( 'url'); public function index () $ this-> load-> view ('upload'); We laden ook in het bestandsmodel, zodat we het in onze methoden kunnen gebruiken. Een beter alternatief is om het in uw eigenlijke project te laden.
Maak uw mening, upload.php. Deze weergave bevat ons uploadformulier.
Upload bestand
Vergeet niet te plaatsen ajaxfileupload.js in js /.
Zoals je ziet, laden we bovenaan in onze scripts; jQuery, AjaxFileUpload en ons eigen js-bestand. Dit bevat onze aangepaste JavaScript.
Vervolgens maken we eenvoudig een standaard HTML-formulier. De lege #files div is waar onze lijst met geüploade bestanden zal zijn.
Precies zo ziet het er niet uit heel zo slecht, laten we wat standaard CSS toevoegen aan ons bestand style.css in css /.
h1, h2 font-family: Arial, sans-serif; tekengrootte: 25 px; h2 font-size: 20px; label font-family: Verdana, sans-serif; lettergrootte: 12px; weergave: blok; invoer opvulling: 3px 5px; breedte: 250 px; marge: 0 0 10px; invoer [type = "bestand"] opvulling links: 0; invoer [type = "submit"] width: auto; #files font-family: Verdana, sans-serif; font-size: 11px; #bestanden sterk font-size: 13px; #files a float: right; marge: 0 0 5 px 10 px; #files ul lijststijl: geen; opvulling links: 0; #files li width: 280px; lettergrootte: 12px; opvulling: 5px 0; border-bottom: 1px solid #CCC;
Maken en openen site.js in js /. Plaats de volgende code:
$ (function () $ ('# upload_bestand'). submit (functie (e) e.preventDefault (); $ .ajaxFileUpload (url: './ upload / upload_file /', secureuri: false, fileElementId: ' userfile ', dataType:' json ', data: ' title ': $ (' # title '). val (), success: function (data, status) if (data.status! =' error ') $ ( '# files'). html ('Bestanden opnieuw laden?
'); refresh_files (); $ ('# title'). val ("); alert (data.msg);); return false;);); Het JavaScript neemt het formulier over en AjaxFileUpload neemt het over. Op de achtergrond wordt een iframe gemaakt en worden de gegevens via dat kader verzonden.
We passeren de titelwaarde in de gegevensparameter van de AJAX-aanroep. Als u meer velden in het formulier had, zou u ze hier doorgeven.
We controleren dan onze terugkeer (die in JSON zal zijn). Als er geen fout is opgetreden, vernieuwen we de bestandslijst (zie hieronder), wis het titelveld. Hoe dan ook, we waarschuwen het antwoordbericht.
Nu aan het uploaden van het bestand. De URL waarnaar we uploaden is / upload / upload_file /, dus maak een nieuwe methode in de uploaden controller en plaats de volgende code erin.
public function upload_file () $ status = ""; $ msg = ""; $ file_element_name = 'userfile'; if (empty ($ _ POST ['title'])) $ status = "error"; $ msg = "Voer een titel in"; if ($ status! = "error") $ config ['upload_path'] = './files/'; $ config ['allowed_types'] = 'gif | jpg | png | doc | txt'; $ config ['max_size'] = 1024 * 8; $ config ['encryption_name'] = TRUE; $ this-> load-> library ('upload', $ config); if (! $ this-> upload-> do_upload ($ file_element_name)) $ status = 'error'; $ msg = $ this-> upload-> display_errors (","); else $ data = $ this-> upload-> data (); $ file_id = $ this-> files_model-> insert_file ($ data ['file_name'], $ _POST ['title']); if ($ file_id) $ status = "success"; $ msg = "Bestand succesvol geüpload"; else unlink ($ data ['full_path']); $ status = "error"; $ msg = "Er is iets verkeerd gegaan bij het opslaan van het bestand. Probeer het opnieuw."; @unlink ($ _ FILES [$ file_element_name]); echo json_encode (array ('status' => $ status, 'msg' => $ msg)); Deze code laadt in de CodeIgniter-uploadbibliotheek met een aangepaste config. Raadpleeg voor een volledige referentie de CodeIgniter-documenten.
We doen een eenvoudige controle om te bepalen of de titel leeg is of niet. Als dit niet het geval is, laden we in de CodeIgniter-uploadbibliotheek. Deze bibliotheek verwerkt veel van onze bestandsvalidatie voor ons.
Vervolgens proberen we het bestand te uploaden. als dit lukt, slaan we de titel en de bestandsnaam op (die worden doorgegeven via de geretourneerde gegevensreeks).
Vergeet niet om het tijdelijke bestand van de server te verwijderen en echo uit de JSON zodat we weten wat er is gebeurd.
In overeenstemming met het MVC-patroon, zal onze DB-interactie worden afgehandeld door een model.
creëren files_model.php, en voeg de volgende code toe:
class Files_Model breidt CI_Model uit public function insert_file ($ filename, $ title) $ data = array ('filename' => $ filename, 'title' => $ title); $ this-> db-> insert ('bestanden', $ gegevens); return $ this-> db-> insert_id (); We moeten ook de map maken waarnaar onze bestanden worden geüpload. Maak een nieuw bestand in uw webroot genoemd bestanden, ervoor zorgen dat het door de server kan worden geschreven.
Na een succesvolle upload moeten we de lijst met bestanden vernieuwen om de wijziging weer te geven.
Open site.js en voeg de onderstaande code toe aan de onderkant van het bestand, onder al het andere.
function refresh_files () $ .get ('./ upload / files /') .success (functie (gegevens) $ ('# bestanden'). html (data);); Dit roept simpelweg een URL op en voegt de geretourneerde gegevens in een div met een id van bestanden.
We moeten deze functie op de pagina laden om de bestandslijst in eerste instantie te tonen. Voeg dit toe aan de document-ready-functie bovenaan het bestand:
refresh_files ();
De URL die we bellen om de bestandslijst te krijgen is / upload / files /, dus maak een nieuwe methode genaamd bestanden, en plaats in de volgende code:
openbare functiebestanden () $ files = $ this-> files_model-> get_files (); $ this-> load-> view ('files', array ('files' => $ files)); Een heel kleine methode, we gebruiken ons model om de momenteel opgeslagen bestanden te laden en door te geven aan een weergave.
Ons model behandelt het ophalen van de bestandslijst. Doe open files_model.php, en voeg in de get_files () functie.
openbare functie get_files () return $ this-> db-> select () -> from ('files') -> get () -> result (); Heel simpel eigenlijk: selecteer alle bestanden die in de database zijn opgeslagen.
We moeten een weergave maken om de lijst met bestanden weer te geven. Maak een nieuw bestand, genaamd files.php, en plak in de volgende code:
Geen bestanden geüpload
Dit loopt door de bestanden en toont de titel en de bestandsnaam van elk. We geven ook een verwijderkoppeling weer, die een gegevenskenmerk van de bestands-ID bevat.
Om de tutorial af te ronden, voegen we de functionaliteit toe om het bestand te verwijderen, ook met behulp van AJAX.
Voeg het volgende toe aan de documentklare functie:
$ ('. delete_file_link'). live ('klik', functie (e) e.preventDefault (); if (confirm ('Weet je zeker dat je dit bestand wilt verwijderen?')) var link = $ (this ); $ .ajax (url: './upload/delete_file/' + link.data ('file_id'), dataType: 'json', success: function (data) files = $ (# files); if ( data.status === "succes") link.parents ('li'). fadeOut ('fast', function () $ (this) .remove (); if (files.find ('li'). lengte == 0) files.html ('Geen bestanden geüpload
'); ); else alert (data.msg); ); ); Het is altijd een goed idee om een gebruikersbevestiging te krijgen bij het verwijderen van informatie.
Wanneer er op een verwijderlink wordt geklikt, wordt een bevestigingsvak weergegeven met de vraag of de gebruiker zeker weet. Als ze dat zijn, bellen we naar / Upload / delete_file, en als dit lukt, vervagen we het uit de lijst.
Zoals hierboven, is de URL die we bellen / Upload / delete_file /, dus maak de methode Verwijder bestand, en voeg de volgende code toe:
public function delete_file ($ file_id) if ($ this-> files_model-> delete_file ($ file_id)) $ status = 'success'; $ msg = 'Bestand succesvol verwijderd'; else $ status = 'error'; $ msg = 'Er is iets misgegaan bij het verwijderen van het bestand, probeer het opnieuw'; echo json_encode (array ('status' => $ status, 'msg' => $ msg)); Nogmaals, we laten het model het zware werk doen, waarbij het de output weerkaatst.
We zijn nu aan het laatste stukje van de puzzel: onze laatste twee methoden.
openbare functie delete_file ($ file_id) $ file = $ this-> get_file ($ file_id); if (! $ this-> db-> where ('id', $ file_id) -> delete ('files')) return FALSE; ontkoppelen ('./ files /'. $ file-> bestandsnaam); return TRUE; openbare functie get_file ($ file_id) return $ this-> db-> select () -> from ('files') -> where ('id', $ file_id) -> get () -> row (); Omdat we alleen de ID doorgeven, moeten we de bestandsnaam krijgen, dus we maken een nieuwe methode om het bestand te laden. Eenmaal geladen, verwijderen we de record en verwijderen we het bestand van de server.
Dat is het, tutorial compleet! Als u het uitvoert, moet u een bestand kunnen uploaden, het kunnen zien verschijnen en het dan kunnen verwijderen; alles zonder de pagina te verlaten.
Vanzelfsprekend kunnen de meningen enigszins boeien, maar deze tutorial zou je genoeg moeten hebben gegeven om dit in je site te kunnen integreren..
Er zijn echter enkele tekortkomingen in deze methode:
div bij het uploaden van bestanden, in plaats van ze volledig te vervangen.Bedankt voor het lezen!
