Share
Nu par să ajung la sfârșitul lucrurilor distractive pe care le puteți face cu tehnologiile web emergente. Astăzi, vă voi arăta cum să faceți ceva care - până în ultima vreme - a fost aproape fără precedent: încărcarea fișierelor prin AJAX.
Sigur, au existat hackeri; dar dacă sunteți ca mine, și vă simțiți murdar de fiecare dată când tastați iframe, o să vă placă foarte mult. Alătură-mi-mă după salt!
Dacă doriți o soluție rapidă, există o mare colecție de scripturi și aplicații de încărcare a fișierelor de pe Envato Market.ya
Acest fișier de încărcare a fișierelor HTML5 este deosebit de interesant - puteți să adăugați ușor fișiere prin glisarea și plasarea acestora sau făcând clic. Toate fișierele vor fi încărcate prin AJAX sau pot fi adăugate într-un formular și fișierele pot fi redenumite înainte de încărcare. O soluție minunată și rapidă dacă asta este ceea ce căutați!
De ce să nu luăm vestea proastă?
Acest lucru nu funcționează în fiecare browser. Cu toate acestea, cu unele îmbunătățiri progresive (sau oricare ar fi cuvântul curent), vom avea o pagină de încărcare care va funcționa chiar înapoi la IE6 (deși fără biții AJAXy).
Încărcarea noastră AJAX va funcționa atâta timp cât
FormDataeste disponibil; în caz contrar, utilizatorul va primi o încărcare normală.
Există trei componente principale ale proiectului nostru.
Accentsconagua
multiplu atributul în dosar intrare element.FileReader obiect din nou API de fișiere.FormData obiect din XMLHttpRequest2.Noi folosim multiplu atribut pentru a permite utilizatorului să selecteze mai multe fișiere pentru încărcare (încărcarea mai multor fișiere va funcționa normal, chiar dacă FormData nu este disponibil). După cum veți vedea, FileReader ne permite să afișăm miniaturile utilizatorilor din fișierele pe care le încarcă (vom aștepta imagini).
Nici una dintre cele trei funcții nu funcționează în IE9, astfel încât toți utilizatorii IE vor primi o experiență de încărcare normală (deși înțeleg că suportul pentru "FileReader" este disponibil în IE10 Dev Preview 2). FileReader nu funcționează în cea mai recentă versiune de Safari (5.1), așa că nu vor primi miniaturile, dar vor primi mesajul de încărcare AJAX și mesajul de confirmare. În cele din urmă, Opera 10.50 a avut FileReader sprijin, dar nu FormData de sprijin, astfel încât acestea vor primi miniaturi, dar încărcări normale.
Cu asta, să facem codificarea!
Să începem cu un punct de referință și stil de bază. Desigur, aceasta nu este partea principală a acestui tutorial, nu te voi trata ca un începător.
HTML API pentru fișiere Încărcați imaginile
Destul de bază, nu? Avem un formular la care se face postarea upload.php, la care ne vom uita intr-o secunda, si un singur element de intrare, de tip fişier. Observați că are booleanul multiplu , care permite utilizatorului să selecteze mai multe fișiere simultan.
Asta e tot ce trebuie să vezi aici. Sa trecem peste.
corp font: 14px / 1.5 helvetica-neue, helvetica, arial, san-serif; padding: 10px; h1 margin-top: 0; #main lățime: 300px; margin: auto; fundal: #ececec; padding: 20px; frontieră: 1px solid #ccc; # listă de imagini list-style: none; margin: 0; padding: 0; # imagine-list li fundal: #fff; frontieră: 1px solid #ccc; text-align: center; padding: 20px; margin-bottom: 19px; # imagine-list li img lățime: 258px; vertical-aliniere: mijloc; frontieră: 1px solid # 474747;
Absolut nici un șocant aici.
Trebuie să putem gestiona încărcările de fișiere și pe partea din spate, așa că haideți să acoperiți următorul lucru.
$ eroare) if ($ error == UPLOAD_ERR_OK) $ nume = $ _FILES ["imagini"] ["nume"] [cheie $]; mov_uploaded_file ($ _FILES ["imagini"] ["tmp_name"] [$ key], "uploads /". ecou "Imaginile încărcate cu succes
„;
Rețineți că acestea au fost primele linii de PHP pe care le scrisesem cu ușurință un an (sunt un tip Ruby). Probabil ar trebui să faci ceva mai mult pentru siguranță; cu toate acestea, pur și simplu ne asigurăm că nu există erori de încărcare. În acest caz, folosim built-in-ul move_uploaded_file să o mutați într-un încărcări pliant. Nu uitați să vă asigurați că folderul este scris.
Deci, acum, ar trebui să avem un formular de încărcare. Alegeți o imagine (mai multe, dacă doriți și browserul dvs. vă permite), faceți clic pe ?Încărca fișiere!? și veți primi mesajul ?Imaginile încărcate cu succes.?
Iată ce arată mini-proiectul nostru până acum:
Dar, haideți, este 2011: vrem mai mult decât atât. Veți observa că am legat jQuery și unul upload.js fişier. Hai să ne descurcăm acum.
Să nu pierdem timpul: aici mergem!
(funcția () var input = document.getElementById ("imagini"), formdata = false; if (window.FormData) formdata = new FormData;) document.getElementById ("btn" "; (); Iată de ce începem. Creăm două variabile: intrare este elementul nostru de intrare în fișier; formdata va fi folosit pentru a trimite imaginile pe server dacă browserul acceptă acest lucru. Am inițializat-o fals apoi verificați dacă browserul acceptă FormData; Dacă da, vom crea un nou FormData obiect. De asemenea, dacă putem trimite imaginile cu AJAX, nu avem nevoie de "Upload Images!" pentru a putea să-l ascundem. De ce nu avem nevoie de ea? Ei bine, vom încărca automat imaginile imediat după ce le-a selectat utilizatorul.
Restul JavaScript va intra în funcția anonimă de auto-invocare. Mai jos vom crea o funcție mică de ajutor, care va arăta imaginile odată ce le are browserul:
funcția showUploadedItem (sursă) var list = document.getElementById ("imagine-list"), li = document.createElement ("li"), img = document.createElement ("img"); img.src = source; li.appendChild (img); list.appendChild (li); Funcția are un parametru: sursa imaginii (vom vedea cum ajungem în curând). Apoi, găsim pur și simplu lista în marcajul nostru și vom crea un element de listă și o imagine. Am setat sursa de imagine la sursa pe care am primit-o, punem imaginea în elementul de listă și punem elementul listă în listă. Voila!
Apoi, trebuie să luăm imaginile, să le afișăm și să le încărcăm. Așa cum am spus, vom face acest lucru atunci când cu privire la schimbările evenimentul este declanșat pe elementul de intrare.
dacă (input.addEventListener) input.addEventListener ("change", funcția (evt) var i = 0, len = this.files.length, img, reader, file, document.getElementById innerHTML = "Încărcare?" Pentru (; i < len; i++ ) file = this.files[i]; if (!!file.type.match(/image.*/)) , false); Nu trebuie să ne facem griji cu privire la modelul evenimentului proprietar al IE, deoarece IE9 + acceptă funcția standard addEventListener.
Mai sunt multe, dar să începem cu asta. În primul rând, nu trebuie să ne facem griji cu privire la modelul evenimentului proprietar al IE, deoarece IE9 + acceptă standardul addEventListener (și IE9 și în jos nu acceptă noi caracteristici).
Deci, ce vrem să facem când utilizatorul a selectat fișiere? Mai întâi, vom crea câteva variabile. Singurul lucru important acum este len = this.files.length. Fișierele pe care le-a selectat utilizatorul vor fi accesibile din obiect this.files. Chiar acum, suntem doar preocupați de lungime de proprietate, astfel încât să putem bucle peste fișiere?
? care este exact ceea ce facem în continuare. În interiorul buclei noastre, am setat fișierul curent la fişier pentru facilitarea accesului. Următorul lucru pe care îl facem este să confirmați că fișierul este o imagine. Putem face acest lucru prin compararea tip proprietate cu o expresie regulată. Căutăm un tip care începe cu "imagine"? și este urmat de orice. (Dublu-bang în față doar convertește rezultatul la un boolean.)
Deci, ce facem dacă avem o imagine pe mâini?
dacă (window.FileReader) cititor = noul FileReader (); reader.onloadend = funcția (e) showUploadedItem (e.target.result); ; reader.readAsDataURL (fișier); dacă (formdata) formdata.append ("imagini []", fișier); Verificăm dacă browserul acceptă crearea FileReader obiecte. Dacă da, o vom crea.
Iată cum folosim a FileReader obiect: Vom trece pe noi fişier obiecte față de reader.readAsDataURL metodă. Aceasta creează o adresă URL de date pentru imaginea încărcată. Nu funcționează așa cum v-ați aștepta, totuși. Adresa URL a datelor nu este trecută din funcție. În schimb, urlul de date va face parte dintr-un obiect de eveniment.
În acest sens, va trebui să înregistrăm o funcție pe reader.onloadend eveniment. Această funcție ia un obiect de eveniment, prin care primim urlul de date: este la e.target.result (da, e.target este cititor obiect, dar am avut probleme atunci când folosesc cititor in locul e.target în interiorul acestei funcții). Vom transmite adresa URL a datelor noastre showUploadedItem (pe care am scris-o mai sus).
Apoi, verificăm pentru formdata obiect. Amintiți-vă, dacă browserul acceptă FormData, formdata va fi a FormData obiect; altfel, va fi fals. Deci, dacă avem a FormData obiect, o să sunăm adăuga metodă. Scopul a FormData obiect este să dețină valori pe care le trimiteți prin intermediul unui formular; asa ca adăuga metoda ia pur și simplu o cheie și o valoare. În cazul nostru, cheia noastră este imagini []; prin adăugarea parantezelor pătrate până la capăt, ne asigurăm de fiecare dată adăuga o altă valoare, de fapt, o adăugăm la acea matrice, în loc să o suprascriem imagine proprietate.
Aproape că am terminat. În bucla noastră, am afișat fiecare dintre imagini pentru utilizator și le-am adăugat la formdata obiect. Acum, trebuie doar să încărcăm imaginile. In afara pentru bucla, iată ultima piesă a puzzle-ului nostru:
dacă formdata) $ .ajax (url: "upload.php", tastați: "POST", data: formdata, processData: false, contentType: false, success: function (res) document.getElementById ) .innerHTML = res;);
Din nou, trebuie să ne asigurăm că avem FormData a sustine; dacă nu facem asta, "Încarcă fișierele"? butonul va fi vizibil și astfel utilizatorul va încărca fotografiile. Cu toate acestea, dacă avem FormData suport, vom avea grijă de încărcarea prin AJAX. Folosim jQuery pentru a trata toate ciudățenii AJAX din browsere.
Probabil sunteți familiarizați cu jQuery $ .ajax metodă: îi transmiteți un obiect de opțiuni. URL-ul, tip, și succes proprietățile ar trebui să fie evidente. date proprietatea noastră este formdata obiect. Observați asta procesarea datelor și tipul de conținut proprietăți. Conform documentației jQuery, procesarea datelor este Adevărat în mod implicit, și va procesa și transforma datele într-un șir de interogări. Nu vrem să facem asta, așa că am stabilit asta fals. Suntem, de asemenea, setarea tipul de conținut la fals pentru a vă asigura că datele ajung la server așa cum ne așteptăm.
Si asta e. Acum, când utilizatorul încarcă pagina, ei văd:
După ce selectează imaginile, vor vedea:
Iar imaginile au fost încărcate:
Încărcarea fișierelor prin AJAX este destul de misto și este minunat că aceste tehnologii noi acceptă acest lucru fără a fi nevoie de hack-uri lungi. Dacă aveți întrebări despre ceea ce am făcut aici, apăsați aceste comentarii! Vă mulțumesc foarte mult pentru lectură!
Și dacă aveți nevoie de ajutor în legătură cu această problemă de codificare, găsiți suport pentru Envato Studio.
Am construit un ghid complet pentru a vă ajuta să faceți mai multe detalii despre JavaScript, indiferent dacă începeți doar ca dezvoltator web sau doriți să explorați subiecte mai avansate.
