Share
Încărcarea fișierelor în mod asincron poate fi o durere în cele mai bune momente, dar când este cuplată cu CodeIgniter, poate fi o experiență deosebit de frustrantă. Am gasit in sfarsit un mod care nu numai ca functioneaza in mod consecvent, dar pastreaza modelul MVC. Citiți mai departe pentru a afla cum!
Apropo, puteți găsi câteva pluginuri CodeIgniter utile și coduri de scripturi pe Envato Market, deci aveți un navigator pentru a vedea ce puteți găsi pentru următorul proiect.
În acest tutorial vom folosi codul PHP CodeIgniter, jQuery java framework și scriptul AjaxFileUpload.
Se presupune că aveți o cunoaștere activă a CodeIgniter și jQuery, însă nu este necesară cunoașterea prealabilă a AjaxFileUpload. De asemenea, se presupune că aveți deja deja instalat deja CodeIgniter.
Din motive de scurtă durată, încărcarea anumitor biblioteci / modele / ajutoare a fost omisă. Acestea pot fi găsite în codul sursă furnizat și sunt lucruri destul de standard.
Veți avea nevoie, de asemenea, de o bază de date și de un tabel numit fișiere. SQL pentru a crea tabelul menționat este:
Accentsconagua
CREATE TABLE 'fișiere' ('id' int NU NULL AUTO_INCREMENT PRIMARY KEY, 'nume fișier' varchar (255) NOT NULL, 'title' varchar (100) NOT NULL); Până la sfârșitul tutorialului, structura fișierelor ar trebui să pară similară cu aceasta (omiterea dosarelor / fișierelor neutilizate):
public_html /
-- application /
---- controlere /
------ upload.php
---- modele /
------ files_model.php
---- vizualizari /
------ upload.php
------ files.php
-- css /
---- style.css
-- fișiere /
-- js /
---- AjaxFileUpload.js
---- site.js
În primul rând, trebuie să creați formularul de încărcare. Creați un nou Controler, numit încărcați, și în metoda index, faceți vizualizarea încărcați.
Controlorul dvs. ar trebui să arate astfel:
clasa Încărcare extinde CI_Controller funcția publică __construct () parent :: __ construct (); $ This-> a sarcinii> modelul ( 'files_model'); $ This-> a sarcinii> baze de date (); $ This-> a sarcinii> ajutor ( 'url'); indexul funcției publice () $ this-> load-> view ('upload'); De asemenea, încărcăm în modelul de fișiere, astfel încât să îl putem folosi în metodele noastre. O alternativă mai bună ar fi să o autoloadați în proiectul dvs. real.
Creați vizualizarea, upload.php. Această vizualizare va conține formularul de încărcare.
Incarca fisier
Nu uitați să plasați ajaxfileupload.js în js /.
După cum puteți vedea, încărcăm în scenariile noastre de sus; jQuery, AjaxFileUpload și propriul fișier js. Acesta va găzdui JavaScript personalizat.
Apoi, noi creăm pur și simplu un formular HTML standard. Numărul #files div este locul în care va fi lista noastră de fișiere încărcate.
Doar ca nu arata destul de atat de rau, permite adaugarea unor fisiere CSS de baza style.css în css /.
h1, h2 font-family: Arial, sans-serif; font-size: 25px; h2 font-size: 20px; etichetă font-family: Verdana, sans-serif; font-size: 12px; afișare: bloc; intrare padding: 3px 5px; lățime: 250px; margine: 0 0 10px; introducere [type = "file"] padding-left: 0; introducere [type = "trimite"] width: auto; #file font-family: Verdana, sans-serif; font-size: 11px; #file puternice font-size: 13px; #files a float: right; margine: 0 0 5px 10px; #files ul stil-list: nici unul; padding-left: 0; #files li lățime: 280px; font-size: 12px; padding: 5px 0; frontieră de fund: 1px solid #CCC;
Creați și deschideți site.js în js /. Plasați următorul cod:
$ upload_file '), trimiteți (funcția (e) e.preventDefault (); $ .ajaxFileUpload (url:' ./ upload / upload_file / ', secureuri: false, fileElementId: (date.status! = 'eroare') data '), dataType:' json ', data: ' title ' $ ( '# fișiere'). html (“Reîncărcarea fișierelor?
„); refresh_files (); $ ('# title'); val ("); alert (data.msg);); return false;););
Javierul JavaScript dezvăluie formularul de trimitere și AjaxFileUpload preia controlul. În fundal, creează o iframe și transmite datele prin aceasta.
Transmitem valoarea titlului în parametrul de date al apelului AJAX. Dacă ai avea mai multe câmpuri în formă, le-ai transfera aici.
Apoi verificăm întoarcerea (care va fi în JSON). Dacă nu a apărut o eroare, actualizăm lista de fișiere (vedeți mai jos), ștergem câmpul de titlu. Indiferent, avertizăm mesajul de răspuns.
Acum, încărcați fișierul. Adresa URL pe care o încărcăm este / upload / upload_file /, așa că creați o nouă metodă în încărcați controlerul și plasați în el codul următor.
funcția publică upload_file () $ status = ""; $ msg = ""; $ file_element_name = 'userfile'; dacă (gol ($ _ POST ['title'])) $ status = "eroare"; $ msg = "Introduceți un titlu"; dacă ($ status! = "eroare") $ config ['upload_path'] = './files/'; $ config ['permis_types'] = 'gif | jpg | png | doc | txt'; $ config ['max_size'] = 1024 * 8; $ config ['encrypt_name'] = TRUE; $ this-> load-> library ("upload", $ config); dacă (! $ this-> upload-> do_upload ($ file_element_name)) $ status = 'eroare'; $ msg = $ acest-> încărcați-> display_errors (","); altceva $ data = $ this-> upload-> data (); $ file_id = $ acest-> fișiere_model-> insert_file ($ data ['nume_fișier'], $ _POST ['title']); dacă ($ file_id) $ status = "succes"; $ msg = "Fișier încărcat cu succes"; altceva unlink ($ data ['full_path']); $ status = "eroare"; $ msg = "Sa salvat ceva când salvezi fișierul, încercați din nou."; @unlink ($ _ FILES [$ file_element_name]); echo json_encode (array ('status' => $ status, 'msg' => $ msg)); Acest cod se încarcă în biblioteca de încărcare CodeIgniter cu o config personalizată. Pentru o referire completă la aceasta, consultați documentele CodeIgniter.
Facem o verificare simplă pentru a determina dacă titlul este gol sau nu. Dacă nu este, încărcăm în biblioteca de încărcare CodeIgniter. Această bibliotecă se ocupă de o mulțime de validare a fișierelor noastre pentru noi.
Apoi, încercăm să încărcăm fișierul. dacă reușim, salvăm titlul și numele fișierului (trecut prin matricea de date returnată).
Amintiți-vă să ștergeți fișierul temporar de pe server și să reluați JSON-ul pentru a afla ce sa întâmplat.
În conformitate cu modelul MVC, interacțiunea DB va fi gestionată de un model.
Crea files_model.php, și adăugați următorul cod:
clasa Files_Model extinde CI_Model funcția publică insert_file ($ filename, $ title) $ data = array ('nume fișier' => nume fișier, 'title' => $ title); $ this-> db-> insert ('fișiere', $ date); returnați $ this-> db-> insert_id (); De asemenea, trebuie să creați dosarul la care vor fi încărcate fișierele. Creați un fișier nou în rădăcina web numit fișiere, asigurându-vă că este scris de server.
După o încărcare reușită, trebuie să actualizăm lista fișierelor pentru a afișa modificarea.
Deschis site.js și adăugați următorul cod în partea de jos a fișierului, sub orice altceva.
refresh_files () $ .get ('./ upload / files /'). succes (functie (date) $ ('fisiere'). Acest lucru numește pur și simplu o adresă URL și inserează datele returnate într-un div cu un id de fișiere.
Trebuie să apelăm această funcție la încărcarea paginii pentru a afișa inițial lista de fișiere. Adăugați acest lucru în funcția de document pregătit în partea de sus a fișierului:
refresh_files ();
Adresa URL pe care o apelam pentru a obține lista fișierelor este / upload / files /, deci creați o nouă metodă numită fișiere, și plasați în următorul cod:
fișiere de funcții publice () $ files = $ this-> files_model-> get_files (); $ this-> load-> view ('fișiere', array ('files' => $ files)); Destul de mică metodă, folosim modelul nostru pentru a încărca fișierele salvate în prezent și a le transfera într-o vizualizare.
Modelul nostru gestionează recuperarea listei de fișiere. Deschide files_model.php, și adăugați în get_files () funcţie.
funcția publică get_files () return $ this-> db-> select () -> din ('files') -> get () -> rezultat (); Destul de simplu: selectați toate fișierele stocate în baza de date.
Trebuie să creați o vizualizare pentru a afișa lista de fișiere. Creați un fișier nou, numit files.php, și lipiți-l în următorul cod:
Nu au fost încărcate fișiere
Aceasta buclează prin fișiere și afișează titlul și numele fișierului fiecăruia. De asemenea, afișăm un link de ștergere, care include un atribut de date al ID-ului fișierului.
Pentru a încheia tutorialul, vom adăuga funcționalitatea de ștergere a fișierului, utilizând, de asemenea, AJAX.
Adăugați următoarele în funcția de pregătire a documentului:
(dacă doriți să ștergeți acest fișier?)) var.link = $ ); $ .ajax (url: './upload/delete_file/' + link.data ('fișier_id'), dataType: 'json', succes: date.status === "succes") link.parents ('li') fadeOut ('fast', funcția () $ (this). lungime == 0) files.html ('Nu au fost încărcate fișiere
„); ); altceva alert (data.msg); ); ); Este întotdeauna o idee bună să obțineți o confirmare a utilizatorului atunci când ștergeți informații.
Când se face clic pe o legătură de ștergere, afișăm o casetă de confirmare care întreabă dacă utilizatorul este sigur. Dacă sunt, suntem la telefon / Upload / delete_file, și dacă reușim, l-am stins din listă.
Ca mai sus, urlul pe care îl sunăm este / Upload / delete_file /, astfel încât să creați metoda sterge fisierul, și adăugați următorul cod:
funcția publică delete_file ($ file_id) if ($ this-> files_model-> delete_file ($ file_id)) $ status = 'succes'; $ msg = 'Fișier șters cu succes'; altceva $ status = 'error'; $ msg = 'S-a întâmplat ceva când ștergeți fișierul, încercați din nou'; echo json_encode (array ('status' => $ status, 'msg' => $ msg)); Din nou, am lăsat modelul să facă ridicarea greoaie, echivalând ieșirea.
Suntem acum la ultima piesă a puzzle-ului: ultimele două metode.
funcția publică delete_file ($ file_id) $ file = $ this-> get_file ($ file_id); dacă (! $ this-> db-> unde ('id', $ file_id) -> șterge ('fișiere')) returnează FALSE; deconectați ('./ fișiere /'. $ file-> nume fișier); returnează TRUE; funcția publică get_file ($ file_id) return $ this-> db-> select () -> din ('files') -> unde ('id', $ file_id) -> get () -> row; Pentru că transmitem doar ID-ul, trebuie să obținem numele fișierului, așa că vom crea o nouă metodă pentru a încărca fișierul. După încărcare, ștergem înregistrarea și eliminăm fișierul de pe server.
Asta este, tutorial complet! Dacă îl executați, ar trebui să puteți încărca un fișier, să îl vedeți și apoi să îl ștergeți; toate fără a părăsi pagina.
Evident, punctele de vedere se pot face cu unele destul de sus, dar acest tutorial ar trebui să vă fi dat suficient pentru a putea integra acest lucru în site-ul dvs..
Există însă câteva deficiențe la această metodă:
div la încărcarea fișierului, în loc să le înlocuiți pe deplin.Vă mulțumim pentru lectură!
