Odată cu implementarea specificațiilor HTML5 a browserelor, multe lucruri de pe web au făcut-o mult mai ușoară și mai plăcută. Un astfel de lucru este ajax-cererile în general și încărcarea fișierelor pe server utilizând ajax în special.
Deci, descărcați fișierul pe server fără a reîncărca pagina - versiunea cu cantitatea minimă de cod. Utilizăm jQuery și luăm în considerare doar partea clientului (fără partea serverului încă).
La locul de muncă, dezvoltăm acum sistemul nostru CRM. Backend scrie pe Yii. O caracteristică specială a site-ului este că, atunci când mergeți la un alt eveniment pagină clic este interceptată de referință, se transmite o cerere la server și primește în schimb doar blocul dorit de cod html, acesta redesenează DOM-structura. În final, toată lumea este fericită: clienții - munca rapidă pe site, administratori - încărcare redusă pe server, programatorii se bucură doar de frumusețea soluției.
Sa dovedit că toate acestea sunt bune, datorită specificației html5. Principalul dezavantaj al proiectelor de producție este sprijinul pentru IE10 +. Dar am decis să nu acordăm atenție utilizatorilor cu IE8,9 încă - dacă vedem după lansarea proiectului că acești utilizatori nu sunt atât de puțini, atunci vom lua o decizie conform IE8,9.
Prima dată a venit peste pluginul Jquery Ajax Upload. Pare a fi bun, krasivenky, dar, la fel ca toate cadrele, trage o mulțime de js și css-fișiere, precum și cauzele, în loc de a scrie cod, scris configurările corecte care nu au plăcut.
Am decis să pun în aplicare totul pe jQuery (în proiect este încă folosit).
În primul rând, vom face totul cât mai simplu posibil. Html-markup-ul va fi foarte simplu
Acesta este codul din backend, formați intrarea obișnuită cu type = fișier, în url-ul de date specificăm adresa URL prin care vom încărca imaginea și numele conține numele inputului "a".
Pe client vom avea urmatoarele
Să mergem mai departe - js.
Aici totul este cât se poate de simplu:
De asemenea, pentru o mai bună înțelegere a scriptului, am lăsat în mod special console.log (this.files); - Puteți vedea ce structură de date este creată implicit pentru elementul html c type = file.
Dar chiar și atunci am reușit să mă confrunt cu o nuanță. Nu pentru nimic am subliniat opțiunea processData: false. Fără ea nu a funcționat, consola browser-ul, a apărut o eroare: tip negestionat: invocare ilegală în Chrome și TypeError mai semnificativă: „adăugați“ numit pe un obiect care nu implementează FormData interfață. în Firefox (ultima caracteristică a Firebug-ului este că el generează erori mult mai semnificative.) Salvează adesea.).
Și toate deoarece, cu proccessData = adevărat jquery încearcă să convertească toate datele ajax într-o singură linie. Firește, pentru un fișier acest lucru nu este necesar, așadar setarea acestei opțiuni la false va elimina jQuery din chinul.
Soluția, așa cum ați ghicit, este să setați parametrul processData la falsă. Acum sa rezolvat - în instrumentele de dezvoltare ale cromului din fila Rețea, puteți vedea că cererea a mers cu succes la datele fișierelor. Excelent!
Serverul întoarce încă o eroare de 404. Este de înțeles - nici măcar nu am avut de-a face cu ele, așa că a jignit.
Server parte
Pe server, după setarea action'a rout'ov și adăugarea la controlerul (acest cadru, fiecare realizat în diferite moduri), avem acces la fișierul descărcat prin rețeaua globală $ _FILES. Mai mult decât atât, php a descărcat deja fișierul de pe serverul în folderul tmp. Acum poți să faci cu ea tot ceea ce dorește inima ta. Dar, de obicei limitat pentru a muta fișierul într-un director convenabil (tmp are capacitatea de a fi curățat), și, probabil, înregistrările adăugarea la baza de date.
De fapt, pentru o comandă simplă var_dump ($ _ FILES) am ajuns la această concluzie:
Bingo! Fișierul a fost încărcat cu succes pe server folosind Ajax.
Articole similare
Trimiteți-le prietenilor: