Share
Caricare i file in modo asincrono può essere un dolore nel migliore dei casi, ma se accoppiato con CodeIgniter, può essere un'esperienza particolarmente frustrante. Alla fine ho trovato un modo che non solo funziona in modo coerente, ma mantiene il pattern MVC. Continua a leggere per scoprire come!
A proposito, puoi trovare alcuni utili plugin CodeIgniter e code-script su Envato Market, quindi fai una ricerca per vedere cosa puoi trovare per il tuo prossimo progetto.
In questo tutorial, utilizzeremo il framework PHP CodeIgniter, il framework JavaScript jQuery e lo script AjaxFileUpload.
Si presume che tu abbia una conoscenza operativa di CodeIgniter e jQuery, ma non è necessaria alcuna conoscenza precedente di AjaxFileUpload. Si presume inoltre che sia già installata un'installazione di CodeIgniter.
Per brevità, il caricamento di alcune librerie / modelli / helper è stato omesso. Questi possono essere trovati nel codice sorgente fornito, ed è roba piuttosto standard.
Avrai anche bisogno di un database e di una tabella chiamati File. L'SQL per creare la tabella è:
Accentsconagua
CREATE TABLE 'files' ('id' int NOT NULL AUTO_INCREMENT PRIMARY KEY, 'filename' varchar (255) NOT NULL, 'title' varchar (100) NOT NULL); Alla fine del tutorial, la struttura del file dovrebbe essere simile a questa (omettendo cartelle / file non condivisi):
public_html /
-- applicazione/
---- controllori /
------ upload.php
---- Modelli/
------ files_model.php
---- visualizzazioni/
------ upload.php
------ files.php
-- css /
---- style.css
-- File/
-- js /
---- AjaxFileUpload.js
---- site.js
Per prima cosa, dobbiamo creare il nostro modulo di caricamento. Crea un nuovo controller, chiamato caricare, e nel metodo indice, visualizza la vista caricare.
Il tuo controller dovrebbe assomigliare a questo:
la classe Upload estende CI_Controller public function __construct () parent :: __ construct (); $ This-> load-> modello ( 'files_model'); $ This-> load-> database (); $ This-> load-> helper ( 'url'); public function index () $ this-> load-> view ('upload'); Stiamo anche caricando nel modello dei file, quindi possiamo usarlo nei nostri metodi. Un'alternativa migliore potrebbe essere quella di caricarlo automaticamente nel tuo progetto attuale.
Crea la tua vista, upload.php. Questa vista conterrà il nostro modulo di caricamento.
Caricare un file
Non dimenticare di posizionare ajaxfileupload.js in js /.
Come puoi vedere, stiamo caricando nei nostri script in alto; jQuery, AjaxFileUpload e il nostro file js. Questo ospiterà il nostro JavaScript personalizzato.
Quindi, stiamo semplicemente creando un modulo HTML standard. Il div #file vuoto è dove sarà la nostra lista di file caricati.
Solo così non sembra abbastanza così male, aggiungiamo alcuni CSS di base al nostro file style.css in css /.
h1, h2 font-family: Arial, sans-serif; font-size: 25px; h2 font-size: 20px; label font-family: Verdana, sans-serif; font-size: 12px; blocco di visualizzazione; input padding: 3px 5px; larghezza: 250 px; margine: 0 0 10 px; input [type = "file"] padding-left: 0; input [type = "submit"] width: auto; #files font-family: Verdana, sans-serif; font-size: 11px; #files strong font-size: 13px; #file a float: right; margine: 0 0 5px 10px; #files ul list-style: none; padding-left: 0; #files li width: 280px; font-size: 12px; imbottitura: 5px 0; border-bottom: 1px solid #CCC;
Crea e apri site.js in js /. Inserire il seguente codice:
$ (function () $ ('# upload_file'). submit (function (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 ') $ ( '# file'). html ('Ricaricare i file?
'); refresh_files (); $ ('# title'). val ("); alert (data.msg);); return false;);); Il JavaScript dirotta il modulo submit e AjaxFileUpload prende il sopravvento. Sullo sfondo, crea un iframe e invia i dati tramite quello.
Stiamo passando attraverso il valore del titolo nel parametro dati della chiamata AJAX. Se avessi altri campi nel modulo, li passeresti qui.
Controlliamo quindi il nostro ritorno (che sarà in JSON). Se non si è verificato alcun errore, aggiorniamo l'elenco dei file (vedi sotto), deseleziona il campo del titolo. Indipendentemente da ciò, avvisiamo il messaggio di risposta.
Ora avanti per caricare il file. L'URL a cui stiamo caricando è / upload / upload_file /, quindi crea un nuovo metodo nel file caricare controller e inserire il seguente codice in esso.
public function upload_file () $ status = ""; $ msg = ""; $ file_element_name = 'userfile'; if (vuoto ($ _ POST ['title'])) $ status = "error"; $ msg = "Per favore inserisci un titolo"; 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 ($ 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 ['titolo']); if ($ file_id) $ status = "successo"; $ msg = "File caricato con successo"; else unlink ($ data ['full_path']); $ status = "errore"; $ msg = "Qualcosa è andato storto durante il salvataggio del file, per favore riprova."; @unlink ($ _ FILES [$ file_element_name]); echo json_encode (array ('status' => $ status, 'msg' => $ msg)); Questo codice viene caricato nella libreria di caricamento CodeIgniter con una configurazione personalizzata. Per un riferimento completo di esso, controlla i documenti CodeIgniter.
Facciamo un semplice controllo per determinare se il titolo è vuoto o meno. In caso contrario, carichiamo nella libreria di caricamento CodeIgniter. Questa libreria gestisce molti dei nostri file di convalida per noi.
Successivamente, tentiamo di caricare il file. se ha successo, salviamo il titolo e il nome del file (passato attraverso l'array di dati restituito).
Ricordarsi di eliminare il file temporaneo dal server e richiamare il JSON per sapere cosa è successo.
In linea con lo schema MVC, la nostra interazione DB verrà gestita da un modello.
Creare files_model.php, e aggiungi il seguente codice:
class Files_Model estende CI_Model public function insert_file ($ filename, $ title) $ data = array ('filename' => $ filename, 'title' => $ title); $ this-> db-> insert ('files', $ data); restituire $ this-> db-> insert_id (); Dovremmo anche creare la cartella in cui verranno caricati i nostri file. Crea un nuovo file nella tua web root chiamata File, assicurandosi che sia scrivibile dal server.
Al termine del caricamento, è necessario aggiornare l'elenco dei file per visualizzare la modifica.
Aperto site.js e aggiungi il seguente codice alla fine del file, sotto tutto il resto.
function refresh_files () $ .get ('./ upload / files /') .success (function (data) $ ('# files'). html (data);); Questo semplicemente chiama un url e inserisce i dati restituiti in a div con un id di file.
Abbiamo bisogno di chiamare questa funzione sul caricamento della pagina per mostrare inizialmente l'elenco dei file. Aggiungi questo nella funzione pronta per il documento nella parte superiore del file:
refresh_files ();
L'URL che stiamo chiamando per ottenere l'elenco dei file è / upload / files /, quindi crea un nuovo metodo chiamato File, e inserire il seguente codice:
file di funzione pubblica () $ files = $ this-> files_model-> get_files (); $ this-> load-> view ('files', array ('files' => $ files)); Un metodo piuttosto piccolo, utilizziamo il nostro modello per caricare i file attualmente salvati e passarli a una vista.
Il nostro modello gestisce il recupero dell'elenco dei file. Aprire files_model.php, e aggiungi il get_files () funzione.
funzione pubblica get_files () return $ this-> db-> select () -> from ('files') -> get () -> result (); Abbastanza semplice: seleziona tutti i file memorizzati nel database.
Abbiamo bisogno di creare una vista per visualizzare l'elenco dei file. Crea un nuovo file, chiamato files.php, e incolla nel seguente codice:
Nessun file caricato
Questo esegue il loop dei file e visualizza il titolo e il nome file di ciascuno. Visualizziamo anche un collegamento di eliminazione, che include un attributo di dati dell'ID del file.
Per completare il tutorial, aggiungeremo la funzionalità per eliminare il file, anche utilizzando AJAX.
Aggiungi il seguente nella funzione pronta per il documento:
$ ('. delete_file_link'). live ('click', function (e) e.preventDefault (); if (conferma ('Sei sicuro di voler cancellare questo file?')) var link = $ (questo ) $ .ajax (url: './upload/delete_file/' + link.data ('file_id'), dataType: 'json', success: function (data) files = $ (# files); if ( data.status === "success") link.parents ('li'). fadeOut ('fast', function () $ (this) .remove (); if (files.find ('li'). length == 0) files.html ('Nessun file caricato
'); ); else alert (data.msg); ); ); È sempre una buona idea ricevere conferma da un utente quando si eliminano le informazioni.
Quando si fa clic su un collegamento di eliminazione, viene visualizzata una finestra di conferma che chiede se l'utente è sicuro. Se lo sono, facciamo una chiamata a / Upload / delete_file, e se ha successo, lo sbiadiamo dalla lista.
Come sopra, l'URL che stiamo chiamando è / Upload / delete_file /, quindi crea il metodo cancella il file, e aggiungi il seguente codice:
funzione pubblica delete_file ($ file_id) if ($ this-> files_model-> delete_file ($ file_id)) $ status = 'success'; $ msg = 'File cancellato con successo'; else $ status = 'errore'; $ msg = 'Qualcosa è andato storto durante l'eliminazione del file, per favore riprova'; echo json_encode (array ('status' => $ status, 'msg' => $ msg)); Ancora una volta, lasciamo che il modello faccia il sollevamento pesante, facendo eco all'output.
Ora siamo al pezzo finale del puzzle: i nostri ultimi due metodi.
funzione pubblica delete_file ($ id_file) $ file = $ this-> get_file ($ id_file); if (! $ this-> db-> where ('id', $ file_id) -> delete ('files')) return FALSE; unlink ('./ files /'. $ file-> nomefile); return TRUE; public function get_file ($ file_id) return $ this-> db-> select () -> from ('files') -> where ('id', $ file_id) -> get () -> row (); Poiché passiamo solo l'ID, dobbiamo ottenere il nome file, quindi creiamo un nuovo metodo per caricare il file. Una volta caricato, cancelliamo il record e rimuoviamo il file dal server.
Questo è tutto, tutorial completo! Se lo esegui, dovresti riuscire a caricare un file, vederlo apparire e quindi cancellarlo; tutto senza lasciare la pagina.
Ovviamente, i punti di vista possono essere risolti, ma questo tutorial dovrebbe averti dato abbastanza per essere in grado di integrarlo nel tuo sito.
Ci sono alcune lacune a questo metodo, tuttavia:
div al caricamento del file, invece di sostituirli completamente.Grazie per aver letto!
