Ajax feltölteni a fájlokat a szerver segítségével jquery
Ebben a cikkben megtudhatja, hogyan kell végrehajtani AJAX feltölteni a fájlokat a szerver segítségével jQuery. Ez nem olyan nehéz!
Nem tudom pontosan, de valami azt súgja, hogy eljövetele előtt jQuery feltölteni a fájlokat a szerverre AJAX technológiát valami nagyon egyértelmű, és ezért rendkívül nehéz. De ma az Advent a jQuery sem tapasztalt webmaster tudja csinálni gond nélkül. Azonban ilyen vagy olyan módon, továbbra is meg kell rendezni. És most megpróbálom nagyon röviden és világosan elmagyarázza, hogy hogyan kell ezt csinálni, és könnyebb érzékelni a lecke tartalmaz egyetlen helyes és van osztva lépésre.
Nos, a kevésbé mondta, kezdjük!
Kezdeni, tegyük fel, hogy van ez a HTML kód: mező és a letöltés gombra:
Előállítása 1. adatfájl fájl mezőben
Az első dolog, amit tennie kell - az, hogy az adatbeviteli mezőt, hozzáadva a fájl (ok). Ehhez csatolja egy esemény megváltoztatja a funkció, ami a fájl telepítését adatok:
Ez a kód fogja megmenteni a mezőadatokat type = „file” változó fájlokat. amellyel fogunk dolgozni.
2. Tegyen fájlokat kattintva
Most kell akasztani egy click esemény a gombra „Fájlok feltöltése”. És akkor meg kell küldeni egy AJAX kérés a fájlokat.
Hozzon létre egy függvényt, akassza a click esemény és küldjön egy AJAX kérés a fájlokat. Ez a kérelem eltér a szokásos AJAX kérés, majd nem illik a megszokott küldő POST adatok:
Mi függvény? Létrehoz egy új új formData (). hozzáadja a fájl adatait egy sor fájlokat. Ezután a tárgy alakját adat átkerült az AJAX kérés. 2 paramétert kell beállítani, hogy hamis Kötelező:
- processData - mert jQuery konvertálja a string tömb fájlok, és a szerver nem lesz képes, hogy az adatokat.
- contentType - mert az alapértelmezett telepítés jQuery egyenlő application / x-www-form-urlencoded. amely nem biztosítja a küldő fájlok. És mégis, ha ezt a paramétert multipart / form-data. Úgy néz ki, hogy nem fog működni.
3. Fájlok feltöltése
Annak igazolására, hogy hogyan kell kezelni a kiküldött kérésére a második bekezdésben, adok egy egyszerű php-script, ellenőrzés nélkül.
Submit.php létrehozza a fájlt, és add meg a kódot (feltételezve, hogy submit.php rejlik ugyanabban a mappában a fájlt, amely az Ön által küldött egy AJAX kérés):
Ne használd ezt a kódot közvetlenül! Írja meg saját!
következtetés
Nem, hogy összegyűjti a fenti kódot kézzel, töltse le ezt a fájlt ide: ajax-file-upload.zip. Töltsük be a tartalmat a php szerver megy a PACU az archívumból, majd próbálja meg letölteni egy fájlt. Látni fogja, hogyan működik mindez, képes lesz „poshamanit” a kódot, és tudjon meg többet a valós világban.
Azt is javasoljuk, hogy olvassa el a cikket az alapvető ismeretek létrehozására AJAX kérések WordPress:
Ismerete ezt a cikket, akkor nagyon hasznos, ha létre WordPress AJAX fájlok feltöltése.
Általában úgy történt, hogy a megváltozott adattípus: HTML, kisebb változtatásokat, és keresni!
Köszönöm a kódot, nem az első alkalommal a használatát. De az utóbbi időben, hogy miért data.append (kulcs, érték); Nem akar dolgozni. var adatok = új FormData ();
$ .Minden (fájlok, funkció (kulcs, érték) console.log (billentyű + ';' + érték);
data.append (kulcs, érték);
>);
console.log (adatok);
A konzol megjeleníti az összes fájl - console.log (billentyű + „;” + érték); de az adatokat - üres. js nem hibaüzenet.
Kedves!
Wrap kód formájában helyett click (funkció használatához nyújt be (funkció, amely esemény a forma helyett a Tovább gombra var form_data = new FormData ($ (this) Szálljon (0)). És át az összes paramétert form_data formái, beleértve a csatolt fájlt.
$ ( '# Form') benyújtja (function () var form_data = new FormData ($ (this) Szálljon (0)) .;
$ .ajax (url:”./submit.php?uploadfiles'
írja: 'POST',
adatok: form_data,
cache: hamis,
adattípus: „JSON”
processData: false, // nem tudja kezelni a fájlokat (Ne dolgozza fel a fájlok)
contentType: hamis,
siker: function ()<>
>
A kimeneti kap és a POST és a FILE
PS talált kapcsolatok, így írni, hogy a bíróság.
Ha a „küldés” nélkül fájl - bug :) kezelik itt van egy öltés
event.preventDefault (); // Teljes leállás történik
if (typeof fájlok == 'definiálatlan) visszatérés;
Köszönjük például !.
helyett:
$ .Minden (files_path, funkció (kulcs, val) )
levelet:
$ .Minden (files_path, funkció (kulcs, val) )
maga kijavítani kicsit css
például
.admin .ajaxRespond kijelző: -webkit-flex;
kijelző: flex;
>
.admin .ajaxRespond-imgPreview szélesség: 200px;
>
És persze minden szuper, én csúszott létrehozását előzetesek és átméretezni rövidebb, tolta a zsákutcából. Minden akarta, hogy semmilyen módon. )
Lehetett távolítani helyett két sor, csak a felső, második ütközők standard kezelési formák
Kérdezzen mint már letöltött fájlokat küldeni a posta?
Köszönjük! Minden működik, aki nem megy csak hiányzik valami, az én esetemben, én voltam az egyetlen fájlt, majd adtam hozzá ezt meg:
var adatok = új FormData ();
data.append ( "név", $ ( "input [type = file]") [0] .files [0]);
és hogy nem voltak hibák kell használni:
processData: hamis,
contentType: hamis,
Vicces, a ajax elküldi a POST kérést az adatokat, de a szerver valamilyen okból GET
url:”./submit.php?uploadfiles'
írja: 'POST',
adat:,
Itt, az adatok POST metódussal, és elérhető lesz a $ _POST változó, de mivel ez a fájlokat $ FILES, illetve uploadfiles meghatározott GET paramétereket. Összesen kérés megy ./submit.php változó $ _GET [ 'uploadfiles'] és a változókat $ _POST / $ _FILES által küldött $ _POST. Nos senki tiltja, hogy adja át a GET és a POST adatokat egyszerre.
Példa kód nem működik.
Szinte minden rendben. Két kérdés. 1. A könyvtár a szerveren fájlnevek általában át csak akkor, ha a latin. A cirill ábécét tönkölybúza abrakadabra. Sőt, a felhasználó visszatér a neveket megfelelően. Hogyan lehet megszabadulni tőle? 2. betöltése csak az utolsó kiválasztott fájlt. Hogyan lehet feltölteni egy pár?
Miután egy agy, gondoltam őket), hanem a kiadások időben. És a kód nem érvényes a HTML5? Ha igen, akkor a lényeg elveszett. Attribútumok furcsa html. Anélkül, hogy működni fog?