Hogyan készítsünk html5 képfeltöltőt - mindent a webes fejlesztésről
Kép készítése
Ha fájlt szeretne feltölteni egy kiszolgálóra, egy elemre van szüksége . Ugyanakkor lehetővé kell tennie a felhasználó számára, hogy közvetlenül a weboldalra húzza a képeket az asztalról.
A feltöltendő fájlok többszörös kijelölése
Ha a felhasználó egyszerre több fájlt szeretne kiválasztani, helyezze be a több attribútumot a fájlelembe
Fájlok előfeldolgozása
Használja a Fájl API-t
(A Fájl API használatával kapcsolatos részletekért lásd itt)
Miután kiválasztotta a fájlelemet, az adatkészletet vagy a dragdrop fájlt, a fájlok listája készen áll.
Győződjön meg róla, hogy ezek a fájlok képek:
Bélyegkép / indexkép megjelenítése
Két lehetőség van. Használhatja a FileReadert (a Fájl API-ból), vagy használhatja az új createObjectURL () metódust.
A vászon használata
Meg lehet húzni fájl az elemen
Kép átméretezése
Az emberek közvetlenül a fényképezőgépről készítettek képeket. Ez nagy felbontást és rendkívül nehéz (több megabájtos) fájlokat eredményez. A használat függvényében megváltoztathatja az ilyen képek méretét. A trükk az, hogy csak egy kis vászon (800 × 600, például), és rajzolja ezt a képet a vászon. Természetesen át kell méreteznie a vászon méretét a kép méretarányának megőrzéséhez.
Kép szerkesztése
Most van egy kép a vászonban. Most a lehetőségeid végtelenek. Tegyük fel, hogy szépia szűrőt szeretne alkalmazni:
Letöltés az XMLHttpRequest-ből
Most, hogy feltöltötted a képeket az ügyfélre, végül elkülded őket a kiszolgálóra.
Vászon küldése
Megoszthatatlan betöltés
Engedélyezze a felhasználónak, hogy egyszerre csak egy fájlt vagy egy fájlt töltsön fel.
A letöltés előrehaladása
Használja a terhelési eseményt a mutató létrehozásához:
FormData használata
Valószínűleg nem akarsz csak feltölteni egy fájlt (ami könnyen elvégezhető a következővel: xhr.send (fájl)), de hozzáadhat harmadik féltől származó információkat (például egy kulcsot és egy nevet).
Ebben az esetben létre kell hoznia egy multipart / form-data lekérdezést az FormData objektum segítségével
Nyissa meg webhelyének API-jét
Talán más webhelyeket szeretnél használni a webhelyed szolgáltatásként. \
Engedélyezze a keresztvásárlási kéréseket
Alapértelmezés szerint az API csak a saját domainjéből létrehozott lekérdezésből áll rendelkezésre. Ha engedélyezni szeretné, hogy az emberek használhassák API-jukat, engedélyezze a cross-XHR-t a HTTP fejlécben:
A tartományok csak előre meghatározott listáját is engedélyezheti.