În acest post veți învăța cum să implementați fișierele AJAX care încarcă fișiere pe server utilizând jQuery. Nu e așa de greu!
Nu știu sigur, dar ceva îmi spune că, înainte de apariția jQuery, încărcarea fișierelor pe server folosind tehnologia AJAX a fost ceva foarte de neînțeles și, prin urmare, extrem de dificil. Dar astăzi, odată cu apariția jQuery, chiar și un webmaster neexperimentat poate face acest lucru fără prea mult efort. Cu toate acestea, într-un fel sau altul, va trebui încă să fie sortată. Și acum vă voi încerca foarte succint și în mod clar să vă explic cum se face acest lucru și pentru a fi mai ușor de perceput, lecția conține doar ceea ce este necesar și este împărțit în pași.
Ei bine, mai puține cuvinte, să începem!
Pentru început, să presupunem că avem acest cod HTML: câmpul și butonul de descărcare:
1. Obținerea datelor fișierului din câmpul fișierului
Primul lucru pe care trebuie să-l facem este să obțineți datele de intrare ale câmpului atunci când adăugați fișierul (fișierele) la acesta. Pentru a face acest lucru, atașați la eveniment modificați funcția sa, care va seta datele fișierului:
Acest cod va stoca datele câmpului type = "file" în variabila fișierelor. cu care vom lucra mai departe.
2. Descărcați fișierele prin clic
Acum, trebuie să închidem evenimentul clic pe butonul "Încărcați fișiere". Aceasta va trimite cererea AJAX cu datele fișierului.
Creați o funcție, agățați-o pe evenimentul clic și trimiteți solicitarea AJAX împreună cu datele fișierului. Această solicitare este diferită de solicitarea obișnuită AJAX, iar trimiterea obișnuită a datelor POST nu este potrivită:
Ce face funcția? Creează un nou obiect new formData (). adaugă date de fișiere din matricea fișierelor. Acest obiect de date de formă este apoi trecut la cererea AJAX. 2 parametrii trebuie să fie setați la false:
- processData - deoarece jQuery va converti o serie de fișiere într-un șir, iar serverul nu va putea să obțină datele.
- contentType - deoarece setările implicite jQuery sunt egale cu aplicația / x-www-form-urlencoded. care nu prevede trimiterea fișierelor. De asemenea, dacă setați acest parametru pe mai multe părți / date-forme. se pare că nu va fi nimic.
3. Încărcarea fișierelor pe server
Pentru a ilustra modul de gestionare a interogării trimise în al doilea paragraf, voi da un script PHP simplu, fără nicio verificare.
Creați un fișier submit.php și adăugați acest cod la acesta (presupunând că submit.php se află în același director ca și fișierul din care este trimisă cererea AJAX):
Nu utilizați acest cod direct! Scrie-ti propriul!
concluzie
Pentru a nu colecta manual codul de mai sus, descărcați această arhivă: ajax-file-upload.zip. Încărcați conținutul acestuia pe serverul dvs. php, accesați pachetul din arhivă și încercați să descărcați fișierul. Vei vedea cum funcționează toate, poți "pshamanit" peste cod și înțelege mai mult în condiții reale.
De asemenea, vă recomand să citiți articolul despre cunoștințele de bază pentru crearea interogărilor AJAX în WordPress:
Cunoștințele din acest articol vor fi foarte utile pentru dvs. atunci când creați fișiere AJAX descărcate sub WordPress.
În general, sa dovedit că am schimbat dataType: la HTML, a făcut o mică editare și a câștigat!
Mulțumesc pentru cod, nu pentru prima dată când o folosesc. Dar pentru ultima dată de ce data.append (cheie, valoare); nu vrea să lucreze. var data = noua FormData ();
$ .aach (fișiere, funcție (cheie, valoare) console.log (cheie + ';' + valoare);
data.append (cheie, valoare);
>);
console.log (date);
Consola afișează toate fișierele - console.log (tasta + ';' + valoare); dar aici datele sunt goale. eroare js nu emite.
Dragi prieteni!
Wrap sub formă de cod în loc de clic (funcția, utilizați prezinte (funcție evenimentul pe formular în locul următor butonul var form_data = new FormData ($ (aceasta) .get (0)). Și trec toți parametrii din form_data formulare, inclusiv fișierul atașat.
$ ('# form') trimite (funcție () var form_data = new FormData ($ (acest) .get (0));
$ .ajax (url: './submit.php?uploadfiles',
tip: 'POST',
date: form_data,
cache: false,
dataType: 'json',
processData: false, // nu procesează fișiere (nu procesează fișierele)
contentType: false,
succes: funcția ()<>
>
pe ieșire veți primi atât POST, cât și FILE
PS nu a găsit contacte, așa că scrieți navele.
Dacă "trimite" fără fișiere - o eroare :) Este tratată aici o astfel de linie
event.preventDefault (); // Opriți complet ceea ce se întâmplă
dacă (tipul de fișiere == 'undefined') returnează;
Vă mulțumim pentru exemplu.
în loc de:
$ .each (calea_files, funcția (cheie, val) )
scrie:
$ .each (calea_files, funcția (cheie, val) )
de la sine pentru a corecta un pic css
de exemplu
.administrare .ajaxRespond display: -webkit-flex;
afișaj: flex;
>
.admin.ajaxRespond-imgPreview lățime: 200px;
>
Și, bineînțeles, totul este super, încă mi-am pus degetele în sus și dimensiunea redusă, am împins problema de pe pământ. Tot ce am vrut a fost da. )
A fost posibilă eliminarea în loc de două linii, numai partea de sus, cea de-a doua oprește procesarea standard a formularului
Spuneți-mi cum să trimit fișierele deja descărcate la e-mail?
Mulțumesc! Totul functioneaza, cineva care nu iese afara, doar rateaza ceva, in cazul meu aveam nevoie doar de un singur fisier si l-am adaugat asa:
var data = noua FormData ();
data.append ("nume", $ ("input [type = file]") [0] .files [0]);
și că nu ar exista greșeli de utilizat:
processData: false,
contentType: false,
Funny, ajax trimite cererea de date POST, iar pe server din anumite motive GET
url: './submit.php?uploadfiles',
tip: 'POST',
date: date,
Aici, datele sunt transmise folosind metoda POST, și va fi disponibil prin intermediul variabilei $ _POST, dar cum fișierele fișierele $, și uploadfiles parametrii specificați GET. Cererea totală se duce la ./submit.php $ _GET variabilă [ 'uploadfiles'] și variabile în $ _POST / $ _FILES trimis de $ _POST. Nimeni nu interzice transmiterea simultană a datelor GET și POST.
Codul exemplu nu funcționează.
Aproape totul funcționează bine. Două întrebări. 1. În directorul de pe server, numele fișierelor sunt transferate în mod normal numai dacă sunt în alfabetul latin. În alfabetul chirilic este scris. Iar utilizatorul returnează numele în mod normal. Cum să scapi de ea? 2. Se descarcă numai un ultim fișier selectat. Cum se încarcă mai multe?
Având un creier, m-am gândit la ei), înainte de a petrece timp. Este cazul codului nu pentru html5? Dacă da, atunci întregul înțeles este pierdut. Atributele sunt ciudate în html. Va funcționa fără ele?