Obțineți imagine
Pentru a încărca un fișier pe un server, aveți nevoie de un element . Dar, de asemenea, trebuie să permiteți utilizatorului să tragă imagini de pe desktop direct la pagina web a site-ului dvs.
Selecție multiplă de fișiere pentru încărcare
Pentru a permite utilizatorului să selecteze mai multe fișiere simultan, introduceți atributul multiplu în elementul de fișier
Fișiere de pre-procesare
Utilizați fișierul API
(Pentru detalii despre lucrul cu API-ul de fișiere, consultați aici)
După ce ați selectat fișierele în elementul de fișier, în pachetul de date sau în dragdrop, aveți o listă de fișiere gata de utilizat.
Asigurați-vă că aceste fișiere sunt imagini:
Afișați miniatură / miniatură
Există două opțiuni. Puteți utiliza FileReader (din API-ul Fișier) sau utilizați noua metodă createObjectURL ().
Utilizând Canvas
Poți desena fișierul de pe element
Redimensionarea unei imagini
Oamenii obișnuiau să descarce imagini direct de pe camera lor. Aceasta oferă fișiere de înaltă rezoluție și extrem de grele (mai multe megaocteți). În funcție de utilizare, puteți schimba dimensiunea acestor imagini. Trucul este de a avea doar o pânză mică (de exemplu, 800 × 600) și trageți această imagine în această pânză. Desigur, va trebui să redimensionați pânza pentru a salva raportul de aspect al imaginii.
Editarea unei imagini
Acum aveți o imagine pe pânză. Acum posibilitățile tale sunt nesfârșite. Să presupunem că doriți să aplicați un filtru sepia:
Descărcați din XMLHttpRequest
Acum, că ați încărcat imagini la client, în cele din urmă doriți să le trimiteți la server.
Cum se trimite panza
Indivizibil de încărcare
Permiteți utilizatorului să încarce simultan un singur fișier sau toate fișierele.
Afișați progresul descărcării
Utilizați evenimentul de încărcare pentru a crea un indicator:
Utilizați FormData
Tu, probabil, va dori cu greu să încărcați doar un fișier (care poate fi ușor de realizat cu ajutorul: xhr.send (fișier)), dar, de asemenea, adăuga informații terțe părți (de exemplu, numele cheii).
În acest caz, trebuie să creați o interogare multipart / date-form utilizând obiectul FormData
Deschideți API-ul site-ului
Poate doriți ca alte site-uri să utilizeze site-ul dvs. ca serviciu. \
Activați solicitările încrucișate
În mod implicit, API-ul dvs. este disponibil numai dintr-o interogare creată numai din propriul dvs. domeniu. Dacă doriți să permiteți utilizatorilor să utilizeze API-ul, activați cross-XHR în antetul HTTP:
De asemenea, puteți permite doar o listă predefinită de domenii.
Articole similare
Trimiteți-le prietenilor: