Először természetesen létre kell hozni egy elemet, amely "elkapja" a fájlt. Ezen kívül ebben az elemben egy span címkét helyezünk el, amely megjeleníti a betöltési állapotüzeneteket és bemenet típussal fájlt, hogy ne korlátozza a fájlkiválasztást a húzásra, hanem lehetővé tegye a felhasználók számára, hogy a kijelölt területre kattintva válasszon fájlt. Az alábbiakban bemutatjuk egy ilyen szerkezet végső formáját.

Kattintson ide, vagy húzza át a feltöltendő fájlt.

css ehhez HTML a kód nem figyelemre méltó, kivéve a mező kialakítását bemenet:

#file( szélesség: 100%; magasság: 100%; kijelző: blokk; pozíció: abszolút; felső: 0; bal: 0; átlátszatlanság: 0,01; )

Leírunk két olyan osztályt is, amelyek a „rögzítés” területhez hozzáadva sikeres fájlfeltöltést vagy hibát jeleznek, ha ilyen előfordul:

#drop-zone.success( background-color:#2ecc71; ) #drop-zone.error( background-color:#e74c3c; )

Most rátérhetünk oldalunk "akciójának" megírására. Először is írjunk a változókba hivatkozásokat azokra az objektumokra, amelyeket gyakran fogunk elérni:

Var dropZone = document.getElementById("drop-zone"); var msgConteiner = document.querySelector("#drop-zone .text");

Ezt követően megszabadulunk az alapértelmezett eseményektől, amikor a kurzor belép a fájlfogadó területünkbe az alábbiak szerint:

Var eventClear = függvény (e) ( e.stopPropagation(); e.preventDefault(); ) dropZone.addEventListener("dragent", eventClear, false); dropZone.addEventListener("dragover", eventClear, false);

DropZone.addEventListener("drop", függvény (e) ( if(!e.dataTransfer.files) return; e.stopPropagation(); e.preventDefault(); sendFile(e.dataTransfer.files); ), false); document.getElementById("file").addEventListener("módosítás", függvény (e) ( sendFile(e.target.files); ), false);

Az esemény mindkét esetben függvényhívással zárul sendFile, amelyre a felhasználótól kapott fájl átkerül.

Ez a funkció felelős a fájl kiszolgálóra való átviteléért. Alább láthatja a leírását.

Var sendFile = function(file) ( // az esetlegesen hozzáadott állapotosztályok eltávolítása // ha a felhasználó már megpróbált betölteni valamit dropZone.classList.remove("siker"); dropZone.classList.remove("hiba") ; / / reguláris kifejezés ellenőrzése a fájltípusra // (a példában csak képek tölthetők fel) var re = /(.jpg|.jpeg|.bmp|.gif|.png)$/i; if (!re. exec(fájl.név)) ( msgConteiner.innerHTML = "Érvénytelen fájlformátum!"; dropZone.classList.remove("siker"); dropZone.classList.add("hiba"); ) else ( var fd = new FormData( ); // űrlapobjektum létrehozása fd.append("upfile", fájl); // fájl hozzáadása az űrlap elküldéséhez var xhr = new XMLHttpRequest(); xhr.open("POST", "./upload" .php", true ); xhr.upload.onprogress = showProgress; xhr.onreadystatechange = statChange; xhr.send(fd); // küldés a szervernek ) )

Amint azt már észrevette, a szerverre való adatküldés előtt két esemény is be van állítva, amelyek közül az első a letöltés folyamatának megjelenítéséért, a második pedig a letöltés eredményének jelzéséért felelős. A következőképpen működnek:

Var showProgress = function(e) ( if (e.lengthComputable) ( // a betöltés százalékának kiszámítása var százalék = Math.floor((e.loaded / e.total) * 100); // az aktuális százalékos msgConteiner megjelenítése. innerHTML = " Betöltés... ("+ százalék +"%)"; ) ); var statChange = függvény (e) ( if (e.target.readyState == 4) ( // a kérés feldolgozása után a szerver felé if (e.target.status == 200) ( // ha a kérés sikeres volt msgConteiner.innerHTML = "A feltöltés sikeresen befejeződött!"; dropZone.classList.remove("hiba"); dropZone.classList.add("success"); document.getElementById("showUpFile").innerHTML = this.responseText; ) else ( // egyébként msgConteiner.innerHTML = "Hiba történt!"; dropZone.classList.remove("success"); dropZone.classList.add("hiba"); ) ) )

Az utolsó szakasz a szerverhez kapott adatok feldolgozása lesz.

Folytatjuk a drag and drop betöltés létrehozását, és ma megírjuk a szerverünket, és elkezdjük írni a JavaScript kódot.

Az utolsó cikkben egy index.html fájlt és stílusokat írtunk hozzá. Ma írunk egy szervert, amely letölti a fájlokat és információkat küld róluk a szkriptnek, de először beszéljünk arról, hogy mi lesz a fájlszerkezetünk:

• .htaccess
• index.html
• stílus.css
• upload.php
• feltöltések

Az index.html és style.css fájlokkal minden világos. A .htaccess fájlba egyszerűen beírjuk a kódolást, hogy ne legyen probléma.

AddDefaultCharset UTF-8

Az upload.php fájl feltölti a fájlokat a szerverre a feltöltések mappában.

Tehát kezdjük a php-vel. Ehhez nyissa meg az upload.php fájlt, és írja be a következőket:

A fájl elejére írunk egy Content-Type fejlécet, amely jelzi a böngészőnek, hogy a json-t fogja kapni. Ezután létrehozunk egy üres $uploaded tömböt, és ellenőrizzük, hogy vannak-e egyáltalán fájlok. Ha igen, akkor körözzük őket, és feltöltjük a feltöltési könyvtárunkba, valamint a fő $uploaded tömbünket is kitöltjük olyan altömbökkel, amelyek információkat tartalmaznak a fájlokról. Esetünkben ez a fájl neve és helye. Végül átalakítjuk a tömbünket json-ra, és kinyomtatjuk. Mint látható, a szerver egyáltalán nem bonyolult.

Most térjünk át az index.html fájlra

Húzza ide a fájlokat

(függvény() (
var dropzone = document.getElementById("dropzone");
dropzone.ondragover = function() (
this.className = "dropzone dragover";
this.innerHTML = "Engedje el az egeret";
return false;
};

Dropzone.ondragleave = function() (


return false;
};

Dropzone.ondrop = függvény(e) (
this.className = "dropzone";
this.innerHTML = "Húzza ide a fájlokat";
e.preventDefault();
};
})();

Emlékszel a .dragover osztályra, amit az előző cikkben írtunk, és azt mondtam, hogy akkor kerül alkalmazásra, ha a blokk felett van egy fájl? Most pontosan ezt tettük. Amikor egy fájl megjelenik a blokk felett, az ondragover esemény elindul, ahol egyszerűen hozzáadjuk a .dragover osztályunkat, és módosítjuk a szöveget "Engedd el az egeret". Amikor elmozdítjuk az egeret a fájllal a blokkunktól, az ondragleave esemény aktiválódik, ahol mindent visszaállítunk az eredeti helyére. Amikor egy személy "bedob" egy fájlt a blokkunkba, az ondrop esemény elindul. Ott mindent megváltoztatunk, ahogy az elején volt, különben a .dragover osztály "lefagy", és törli az alapértelmezett viselkedést. Ha ezt nem tesszük meg, akkor egyszerűen megnyílik a fájlunk a böngészőben, amire nincs szükségünk.

A HTML5 újításainak köszönhetően hozzon létre Drag and Drop interfészek sokkal könnyebbé vált. Sajnos ezek az újítások még nem rendelkeznek széleskörű böngészőtámogatással, de remélem ez hamarosan megváltozik (a Ebben a pillanatban működik Firefox 4+, Chrome és Opera 11.10).

Markup Azonnal mondom, hogy a cikk inkább kezdőknek íródott, mint profiknak. Ezért néhány pontot nagyon részletesen ismertetünk.

Először is létre kell hoznunk egy HTML-fájlt a következő tartalommal:

A feltöltéshez húzza ide a fájlt.

Minden munkánkat a dropZone konténerrel végezzük. Most adjunk stílusokat a dokumentumunkhoz (style.css):

Törzs ( betűtípus: 12px Arial, sans-serif; ) #dropZone ( szín: #555; betűméret: 18px; szövegigazítás: középen; szélesség: 400px; kitöltés: 50px 0; margó: 50px automatikus; háttér: #eee ; keret: 1px tömör #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; ) #dropZone.hover ( háttér: #ddd; keretszín: #aaa; ) #dropZone.error ( háttér: #faa; keretszín: #f00; ) #dropZone.drop ( háttér: #afa; keretszín: #0f0; )

A stílusokban a dropZone elem három állapota figyelhető meg: lebeg, ha hiba történik, és siker esetén.

Szkript letöltése Most a szórakoztató részhez érkezünk – a JavaScript kód írásához. Először változókat kell létrehoznunk, amelyek közül az egyikben elhelyezzük a dropZone-unkat, a másodikban pedig megadjuk a maximális fájlméretet.

$(document).ready(function() ( var dropZone = $("#dropZone"), maxFileSize = 1000000; // a fájl maximális mérete 1 mb. ));

Ezután ellenőriznünk kell, hogy a böngésző támogatja-e a Drag and Drop funkciót, ehhez a FileReader funkciót fogjuk használni. Ha a böngésző nem támogatja a Drag and Drop funkciót, akkor a dropZone elemen belül azt írjuk, hogy "A böngésző nem támogatja!" és add hozzá a "hiba" osztályt.

If (typeof(window.FileReader) == "undefined") ( dropZone.text("A böngésző nem támogatja!"); dropZone.addClass("hiba"); )

A következő dolog, amit meg fogunk tenni, az, hogy animáljuk a fájl dropZone-ba húzásának hatását. Ezeket a műveleteket az "ondragover" és az "ondragleave" események segítségével követjük nyomon. De mivel ezeket az eseményeket nem lehet nyomon követni a jQuery objektumon, nem csak a "dropZone"-hoz kell hozzáférnünk, hanem a "dropZone"-hoz.

DropZone.ondragover = function() ( dropZone.addClass("hover"); return false; ); dropZone.ondragleave = function() ( dropZone.removeClass("hover"); return false; );

Most meg kell írnunk az "ondrop" eseménykezelőt - ez az az esemény, amikor a húzott fájlt eldobják. Egyes böngészőkben, amikor a fájlokat a böngészőablakba húzzuk, azok automatikusan megnyílnak, hogy ez ne történjen meg, meg kell szakítanunk a böngésző normál működését. El kell távolítanunk a "hover" osztályt is, és hozzá kell adnunk a "drop" osztályt.

DropZone.ondrop = function(event) ( event.preventDefault(); dropZone.removeClass("hover"); dropZone.addClass("drop"); );

varfile = event.dataTransfer.files; if (file.size > maxFileSize) ( dropZone.text("A fájl túl nagy!"); dropZone.addClass("hiba"); return false; )

Most egy AJAX kérést kell írnunk, amely elküldi a fájlunkat a kezelőnek. AJAX kérés létrehozásához az XMLHttpRequest objektumot használjuk. Adjunk hozzá két eseménykezelőt az XMLHttpRequest objektumhoz: az egyik a fájlletöltés folyamatát, a második pedig a letöltés eredményét mutatja. Az upload.php fájlt fogjuk megadni kezelőként.

varxhr = new XMLHttpRequest(); xhr.upload.addEventListener("haladás", uploadProgress, false); xhr.onreadystatechange = állapotChange; xhr.open("POST", "/upload.php"); xhr.setRequestHeader("X-FILE-NAME", fájl.név); xhr.send(file);

Most foglalkozzunk a letöltés folyamatával és a letöltési eredmény függvényeivel. Az "uploadProgress" függvényben nincs semmi bonyolult, csak egyszerű matematika.

Függvény uploadProgress(event) ( var százalék = parseInt(event.loaded / event.total * 100); dropZone.text("Betöltés: " + százalék + "%"); )

A "stateChange" függvényben ellenőriznünk kell, hogy a betöltési folyamat befejeződött-e, és ha igen, akkor azt, hogy nem történt-e hiba. A sikeres kérés kódja "200", ha a kód eltér ettől, akkor ez azt jelenti, hogy hiba történt.

Függvény stateChange(event) ( if (event.target.readyState == 4) ( if (event.target.status == 200) ( dropZone.text("A feltöltés sikeresen befejeződött!"); ) else ( dropZone.text(" Hiba történt!"); dropZone.addClass("hiba"); ) ) )

A JavaScript rész írása ezzel befejeződött.

Szerver rész Nem marad más hátra, mint írjunk egy egyszerű kezelőt, amely elmenti a fájlt a kívánt helyre. A kezelő megírásában nem megyek mélyre, csak egy kis példát mondok PHP-ben.

Ez minden, remélem, hogy a cikk hasznos volt az Ön számára.

Letöltheti a forrásfájlokat

Bizonyos esetekben talán a szolgáltatás fejlesztői a hibásak, de gyakran a probléma a böngészők által bevezetett korlátozásokban rejlik. Fontolja meg a fájlok szerverre való feltöltését.

A legtöbb esetben egy szabványos mező jelenik meg egy gombbal, amellyel kiválaszthat egy fájlt a számítógépéről, és/vagy egy mezőt, amelyben megadhatja a weben valahol tárolt fájl URL-címét.

Fájlok letöltése innen helyi számítógép még nem nyúlunk hozzá, a témában külön bejegyzést tervezek közzétenni, a letöltést elemezzük távoli szerver.

A problémák az első lépéssel kezdődnek. Még akkor is, ha tisztában van azzal, hogy hol keressen egy URL-t, és jól ismeri az olyan eszközöket, mint a firebug, akkor is néhány egérkattintással megtalálja a megfelelő címet. Sokkal kényelmesebb lenne egyszerűen áthúzni a kívánt képet egyik böngészőablakból a másikba.

Ebben a cikkben egy ilyen interfész megvalósítását mutatom be. Ha szeretné, megtekintheti, hogyan működik a bemutató oldalon, vagy letöltheti a forrásarchívumot.

Jegyzet! Ez a példa csak a böngészőben működik Google Chrome. Elméletileg a Firefox és a Safari támogatja az összes szükséges technológiát, de még nem foglalkoztam velük.

A "húzás" tárgyaként leginkább a Wikipédiáról készítettem képeket. Több probléma is felmerült a kép URL-jei nem latin karaktereivel kapcsolatban, de hogy ne terheljem túl a példát ellenőrzésekkel és átalakításokkal, így hagytam őket.

Működés elve

A HTML5 szabvány támogatja az oldalobjektumok „húzását” (húzással). Egyébként már mutattam egy példát a D&D legegyszerűbb megvalósítására - Drag & Drop HTML5 használatával. Emellett jó néhány JavaScript-könyvtár létezik, amely megvalósítja a D&D támogatást.

De itt fontos megérteni, hogy ha képeket kell "húznia" harmadik fél forrásaiból, akkor nem fogja tudni használni a könyvtárakat. Mert nem fogja tudni hozzáadni a JS-kódját valaki más oldalához. Egy kép feltöltéséhez pedig meg kell szereznünk az URL-jét, pl. a böngészőnek át kell adnia a húzott objektummal annak paramétereit (például a kép src attribútuma vagy a teljes img tag).

Ebben az esetben oldalunkon a képek "fogadóját" tudjuk létrehozni. Ez egy szokásos div lesz, amelyhez egy drop eseménykezelő van hozzárendelve. Ha a felhasználó "eldobja" a képet e div fölé, akkor a kezelő meghívódik, és az első paraméterben kap egy objektumot, amely információkat tartalmaz a húzott képről.

Végrehajtás

Kezdjük a jelentkezési oldalunkkal.

Képek feltöltése

Két blokkot tartalmaz: képek - itt a feltöltött képeket jelenítjük meg és az img_target - ebbe a blokkba kell képeket húzni.

Csatlakozás az oldal alján jQuery könyvtárés egy main.js szkript, amely információkat küld a húzott képekről a szervernek.

Tekintsük a main.js

$(függvény() (
$("#img_target")
.bind("dragent", function(event) (
$(this).addClass("drop_here");
return false;
})
.bind("dragleave", function(event) (
return false;
})
.bind("dragover", function(event) (
return false;
})
.bind("drop", function(event) (
$(this).removeClass("drop_here");
var srcRegex = /src=\"([^\s]+)\"/ig;
var data = event.originalEvent.dataTransfer.getData("text/html");
var img_data = srcRegex.exec(data);
$.post("upload.php", ("file_url":img_data), function(res) (
var válasz = eval("(" + res + ")");
$("#képek").append($(" "));
});
return true;
});

Itt kezelőket rendelünk a dragenter, dragleave és dragover eseményekhez. Mindegyiknek egyszerűen false-t kell visszaadnia, és hogy valahogy tájékoztassuk a felhasználót arról, hogy lehetséges a kép "eldobása", beállítjuk a drop_here CSS osztályt a fogadó blokkhoz a dragenter kezelőben.

A munka nagy része a drop eseménykezelőben történik. Amikor ez az esemény bekövetkezik, információt olvasunk a "ledobott" objektumról, és "kivágjuk" az src attribútum értékét, pl. A kép URL-je (16-18. sor). Az információ az event.originalEvent.dataTransfer objektumban (17. sor) kerül átvitelre.

Ezután létrehozunk egy normál AJAX kérést, és paraméterként adjuk át a talált URL-t.

A szerver szkript (upload.php) megkapja a távoli szerveren lévő kép URL-jét, és feltölti. Az AJAX kérésre pedig elküldi a feltöltött kép új URL-jét.

Az AJAX kéréskezelő viszont létrehoz egy img címkét, és beilleszti a képblokkba. Így a feltöltött képek a feltöltési mező felett jelennek meg.

Fontolja meg az upload.php fájlt

define("BASE_URL", "http://localhost/tests/images-upload/");

függvény upload_from_url($file_url) (
$url_szegmensek = explode("/", $file_url);
$file_name = urldecode(end($url_szegmensek));
if (hamis !== $fájlnév) (
$file_name_parts = explode(".", $fájl_neve);
if (in_array(strtolower(end($file_name_parts)), array("jpeg","jpg","png","gif"))) (
$destination=fopen("feltöltés/".$fájl_neve"w");
$forrás=fopen($file_url,"r");
$maxim.=300*1024;
$hossz=0;
while (($a=fread($source,1024))&&($length "Nincs megadva fájl URL");

if (isset($_POST["fájl_url"])) (
$új_url = feltöltés_a_url($_POST["fájl_url"]);
$res = array("file_url" => $új_url);
}

echo json_encode($res);

A működés elve a következő. Elolvassuk a kép URL-jét, és megpróbáljuk letölteni (29-32. sor).

Ha a kép fel van töltve, mentse el a feltöltési mappába. A távoli szerverről a kép lekérése a fread funkciók segítségével történik. A fájl 1 kB-os blokkokban olvasható (15-18. sor). Ez a megközelítés lehetővé teszi a fájl letöltésének megszakítását, ha a mérete meghaladja a megadott határértéket (jelen esetben 300 kB).

A fájl letöltése után létrehozunk egy URL-t, és elküldjük a böngészőbe json formátumban.

Mint látható, egy ilyen rakodó megvalósítása egyszerű. És nagyon kényelmes a használata. Természetesen a fő hátrány a HTML5 böngészők általi támogatása, vagy inkább annak hiánya.

Ha azonban valamilyen cég dolgozói számára készítünk felületet, és megadhatjuk a böngésző típusát, akkor a HTML5 használható.

Üdvözlök mindenkit! Ebben a cikkben a HTML5-tel kapcsolatos néhány kísérletemről szeretnék beszélni. Messziről kezdem. Időnként mindannyiunknak különféle webes felületekkel kell dolgoznia, és gyakran az az érzésünk, hogy ezt a munkát hatékonyabban is meg lehetne szervezni.

Bizonyos esetekben talán a szolgáltatás fejlesztői a hibásak, de gyakran a probléma a böngészők által bevezetett korlátozásokban rejlik. Fontolja meg a fájlok szerverre való feltöltését. A legtöbb esetben egy szabványos mező jelenik meg egy gombbal, amellyel kiválaszthat egy fájlt a számítógépéről, és/vagy egy mezőt, amelyben megadhatja a weben valahol tárolt fájl URL-címét.

A fájlok helyi számítógépről történő letöltéséhez egyelőre nem nyúlunk, a témában külön bejegyzést tervezek publikálni, távoli szerverről elemezzük a letöltést.

A problémák az első lépéssel kezdődnek. Még akkor is, ha tisztában van azzal, hogy hol keressen egy URL-t, és jól ismeri az olyan eszközöket, mint a firebug, akkor is néhány egérkattintással megtalálja a megfelelő címet. Sokkal kényelmesebb lenne egyszerűen áthúzni a kívánt képet egyik böngészőablakból a másikba.

Ebben a cikkben mutatok egy példát egy ilyen interfész megvalósítására. Ha szeretné, megtekintheti, hogyan működik a bemutató oldalon vagy a .

Jegyzet! Ez a példa csak ebben működik Google böngésző Króm. Elméletileg a Firefox és a Safari támogatja az összes szükséges technológiát, de még nem foglalkoztam velük. A "húzás" tárgyaként többnyire képeket készítettem a Wikipédiáról. Több probléma is felmerült a kép URL-jei nem latin karaktereivel kapcsolatban, de hogy ne terheljem túl a példát ellenőrzésekkel és átalakításokkal, így hagytam őket.

Működés elve

A HTML5 szabvány támogatja az oldalobjektumok „húzását” (húzással). Egyébként már mutattam egy példát a D&D legegyszerűbb megvalósítására - Drag & Drop HTML5 használatával. Emellett jó néhány JavaScript-könyvtár létezik, amely megvalósítja a D&D támogatást.

De itt fontos megérteni, hogy ha képeket kell „húznia” harmadik fél forrásaiból, akkor nem fogja tudni használni a könyvtárakat. Mert nem fogja tudni hozzáadni a JS-kódját valaki más oldalához. Egy kép feltöltéséhez pedig meg kell szereznünk az URL-jét, pl. a böngészőnek át kell adnia a húzott objektummal annak paramétereit (például a kép src attribútuma vagy a teljes img tag).

Ebben az esetben a képek „fogadóját” készíthetjük el oldalunkon. Ez egy szokásos div lesz, amelyhez egy drop eseménykezelő van hozzárendelve. Ha a felhasználó "eldobja" a képet e div fölé, akkor a kezelő meghívódik, és az első paraméterben kap egy objektumot, amely információkat tartalmaz a húzott képről.

Végrehajtás

Kezdjük a jelentkezési oldalunkkal.

Képek feltöltése

Két blokkot tartalmaz: képek - itt a feltöltött képeket jelenítjük meg és az img_target - ebbe a blokkba kell képeket húzni. Az oldal alján szerepel a jQuery könyvtár és a main.js szkript, amely információkat küld a kiszolgálónak a húzott képekről.

Tekintsük a main.js
$(függvény() (
$("#img_target")
.bind("dragent", function(event) (
$(this).addClass("drop_here");
return false;
})
.bind("dragleave", function(event) (

return false;
})
.bind("dragover", function(event) (
return false;
})
.bind("drop", function(event) (
$(this).removeClass("drop_here");
var srcRegex = /src=\"([^\s]+)\"/ig;
var data = event.originalEvent.dataTransfer.getData("text/html");
var img_data = srcRegex.exec(data);
$.post("upload.php", ("file_url":img_data), function(res) (
var válasz = eval("(" + res + ")");
$("#képek").append($(""));
});
return true;
});
});
Itt kezelőket rendelünk a dragenter, dragleave és dragover eseményekhez. Mindegyiknek egyszerűen false értéket kell adnia, és annak érdekében, hogy a felhasználót valamilyen módon tájékoztassuk arról, hogy lehetséges a kép „eldobása”, beállítjuk a drop_here CSS osztályt a fogadó blokkhoz a dragenter kezelőben. A munka nagy része a drop eseménykezelőben történik. Amikor ez az esemény bekövetkezik, információt olvasunk a „ledobott” objektumról, és „levágjuk” az src attribútum értékét, pl. Kép URL-je. Az információ az event.originalEvent.dataTransfer objektumban kerül átvitelre.

Ezután létrehozunk egy normál AJAX kérést, és paraméterként adjuk át a talált URL-t. A szerver szkript (upload.php) megkapja a távoli szerveren lévő kép URL-jét, és feltölti. Az AJAX kérésre pedig elküldi a feltöltött kép új URL-jét. Az AJAX kéréskezelő viszont létrehoz egy img címkét, és beilleszti a képblokkba. Így a feltöltött képek a feltöltési mező felett jelennek meg.

Fontolja meg az upload.php fájlt

A működés elve a következő. Elolvassuk a kép URL-jét, és megpróbáljuk letölteni. Ha a kép fel van töltve, mentse el a feltöltési mappába. A távoli szerverről a kép lekérése a fread funkciók segítségével történik. A fájl 1 kB-os blokkokban olvasható. Ez a megközelítés lehetővé teszi a fájl letöltésének megszakítását, ha a mérete meghaladja a megadott határértéket (jelen esetben 300 kB).

A fájl letöltése után létrehozunk egy URL-t, és JSON formátumban elküldjük a böngészőnek. Mint látható, egy ilyen rakodó megvalósítása egyszerű. És nagyon kényelmes a használata. Természetesen a fő hátrány a HTML5 böngészők általi támogatása, vagy inkább annak hiánya, azonban ha valamilyen cég munkatársai számára készítünk felületet, és megadhatjuk a böngésző típusát, akkor a HTML5 használható.