Fájlok feltöltése a kiszolgálóra az oldal újratöltése nélkül
Szeretném felhívni a figyelmet az "újratöltés nélkül" kifejezésre - ez nem az AJAX használatát jelenti. Mivel világosan meg kell értened, hogy az AJAX használatával nem lehet feltölteni egy fájlt a kiszolgálóra.
Azonban meg tudod szervezni egy indítási folyamatot, amely a felhasználó szemszögéből nézve aszinkronként jelenik meg a fájl átvitele a kiszolgálóra. Megkönnyítheti, hogy miután a felhasználó kiválasztja a szükséges fájlt, és a "Küldés" gombra kattint, az oldal, amelyen található, nem töltődik be, hanem a "Fájl feltöltése a kiszolgálóra". A fájl letöltése után megjelenik egy üzenet a letöltés eredményeivel. Ebben az esetben a fájl a szokásos módon lesz letöltve a kiszolgálóra.
Hogy ezt megtegyem, megpróbálom megmondani ebben a cikkben!
Szóval készítsünk fel egy upload.html oldalt a űrlapunkkal a fájl betöltéséhez és egy láthatatlan kerethez:
Amint látja, ez a szokásos formátum egy fájl feltöltésére a kiszolgálóra, csak a célparaméter adja meg a rejtett keret idét! A kódban van egy tartály a letöltés eredményének megjelenítéséhez.
Most, ha a felhasználó kiválasztja a fájlt, és megnyomja a "Download" gombot, a fájl elküldésre kerül a szerverre, és az eredmény betöltődik a rejtett iframe-be. Miután az adatok átkerültek az iframe-be, át kell vinni őket a főoldalra.
hideBtn () függvényt hívjuk, amikor elküldi a fájlt, és arra használjuk, hogy tájékoztatja a felhasználót, hogy a letöltés, valamint a gomb elrejtése „Feltöltés”, amíg a válasz jött a szerverről, a felhasználó nem tud feltölteni egy új fájlt.
A handleResponse () függvény az iframe-ből a szerver válaszában kerül meghívásra. Ha az eredményt megkapjuk, ismét megjelenik a "Letöltés" gombra. Ha vannak hibák - megjelenítjük azokat, különben megjelenítünk egy üzenetet a sikeres letöltésről.
Most hozzunk létre egy upload.php fájlt, amely átkerül a fájlba:
amelynek tulajdonságnevei ugyanazok lesznek, mint a tömbkulcsok.
Hiba esetén ez az objektum a következő értéket tartalmazza:
Ha nincs hiba, akkor ez az objektum tartalmazza a letöltött fájlra vonatkozó információkat.
Töltsd le itt a forráskódot!
Ez az! Sok szerencsét!