Nahranie súboru na server pomocou JavaScriptu a knižnice JQuery. Nahrávanie súborov na server pomocou ajaxu

241

V tomto článku sa pozrieme na riešenie jedného z najbežnejších problémov – asynchrónne nahrávanie súboru na server a zobrazovanie priebehu. Náš skript nahrá obrázky na server, zobrazí indikátor priebehu a potom zobrazí nahraný obrázok. V niektorých prípadoch možno budete musieť vrátiť ID súboru, ktorý ste nahrali, alebo urobiť niečo iné so súborom na backende, napríklad uložiť ho do databázy atď. V tomto článku sa zameriame na front-end – t.j. implementácia asynchrónneho načítania na klientovi.

Pre testovací projekt vytvorte prázdnu aplikáciu ASP.NET MVC vo Visual Studio. V backende budeme používať C # (ako som povedal, zameriame sa na písanie JavaScriptu, takže pre backend môžete použiť akýkoľvek iný jazyk). Pridajte knižnicu jQuery pomocou Správcu balíkov NuGet (Zobraziť -> Iné Windows -> Konzola správcu balíkov):

Inštalačný balík jQuery

Pridajte triedu ovládača HomeController.cs do priečinka Controllers s nasledujúcim obsahom (nezabudnite, že ovládač Home sa štandardne používa v nastaveniach smerovania projektu – súbor /App_Start/RouteConfig.cs):

pomocou System.Web.Mvc; priestor názvov UploadFiles.Controllers (verejná trieda HomeController: Controller (verejný index ActionResult () (zobrazenie späť ();)))

Kliknite pravým tlačidlom myši na metódu Index a v kontextovej ponuke vyberte položku Pridať zobrazenie. Visual Studio vytvorí súbor zobrazenia /Views/Home/index.cshtml a predvolené rozloženie /Views/Shared/_Layout.cshtml. Zahrňme knižnicu jQuery do zostaveného súboru:

@RenderBody ()

Tu sme tiež pridali reset CSS pre prehliadač a zahrnuli sme šablónu so štýlmi /Content/Site.css. Do priečinka scripts pridajte aj súbor script.js. Pridajme teraz formulár na nahrávanie súborov do projektu. Ak to chcete urobiť, otvorte zobrazenie Index.cshtml a použite nasledujúce označenie:

@ (ViewBag.Title = "(! JAZYK: Index"; } !}

Presuňte svoje súbory do tejto oblasti!

Element sekcie obsahuje formulár s vložením nahratých súborov. Súbory môžu byť umiestnené v tomto kontajneri pomocou drag-and-drop, alebo cez dialógové okno po kliknutí na prvok sekcie. Prvok priebehu bude obsahovať lištu priebehu pre sťahovanie súborov, chyby sa budú zobrazovať v chybovom prvku a kontajner obrázkov je potrebný na zobrazenie obrázkov uložených na serveri.

Teraz musíme pridať CSS štýly pre stránku. Ak to chcete urobiť, upravte súbor /Content/Site.css takto:

Telo (rodina písma: Arial, Helvetica, bezpätkové;) sekcia (pozícia: relatívna; šírka: 380px; výška: 160px; okraj: 40px auto; farba: # 40444f; orámovanie: 0,2rem prerušované # 616778; okraj-polomer : 1,5 m; kurzor: ukazovateľ; - prechod pre web: farba 0,2 s uvoľnenie, farba okraja 0,2 s uvoľnenie; - prechod: prechod farby 0,2 s uvoľnenie farby, uvoľnenie farby okraja 0,2 s; prechod: farba 0,2 s uvoľnenie, farba okraja 0,2 s uvoľnenie; pretečenie: skryté; vrchná vrstva: 90 pixelov; veľkosť poľa: okraj-box;) sekcia: hover, section.dd (farba okraja: # 4d90ff; farba: # 4d90ff; farba pozadia: # e7f0fe;) postava (pozícia: absolútna; šírka: 100 %; výška: 160px; vľavo: 0; hore: 0; displej: blok;) postava: za (pozícia: absolútna ; displej: blok; obsah: ""; výška: 80px; šírka: 80px; horná časť: 5px; ľavý: 50%; ľavý okraj: -40px; pozadie-opakovanie: no-repeat; background-size: 80px 80px; pozadie -image: url (https: //site/my/it/blog/net/images/upload_icon.png); -webkit-transition: nepriehľadnosť 0,2 s jednoduchosť-o ut, farba okraja 0,2 s uvoľnenie; -moz-transition: nepriehľadnosť 0,2s uvoľnenie, farba okraja 0,2s uvoľnenie; prechod: nepriehľadnosť 0,2 s uvoľnenie von, farba okraja 0,2 s uvoľnenie; ) sekcia: obrázok po umiestnení kurzora myši: za, oddiel.dd obrázok: za (nepriehľadnosť: 0,65;) p (zarovnanie textu: stred; váha písma: tučné; veľkosť písma: 16px; výška riadku: 24px;) p malé (hmotnosť písma: normálna; veľkosť písma: 12px; nepriehľadnosť: 0,7;) (pozícia: absolútna; horná časť: -16rem; nepriehľadnosť: 0;) .error (šírka: 380px; okraj: 0 automaticky 20px; výška riadku : 20px; veľkosť písma: 14px; farba: červená; štýl písma: kurzíva; zobrazenie: žiadne; zarovnanie textu: na stred;) / * Ukazovateľ priebehu * / .pokrok (výška: 20px; šírka: 380px; okraj: 0 auto 20px; overflow: hidden; background-color: # 999; border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba (0,0,0, .1); box-shadow: inset 0 1px 2px rgba (0,0,0, 0,1); pozícia: relatívna; zobrazenie: žiadne;) .progress-bar (výška: 100 %; veľkosť písma: 12px; float: left; width: 0; background-color : # 428bca; -webkit-box-shadow: vložka 0 -1px 0 rgba (0,0,0, 0,15); box-shadow: vložka 0 -1px 0 rgba (0,0,0, 0,15); - webkit -prechod: šírka 0,6 s ľahkosť; prechod: šírka 0,6 s ľahkosť;) .progress-val ue (pozícia: absolútna; vľavo: 0; hore: 0; line-height: 20px; výška: 100 %; šírka: 100 %; farba: #fff; text-align: center; ) / * Kontajner s načítanými obrázkami * / .images (šírka: 380px; pretečenie: skryté; okraj: 0 automaticky;) .images a (šírka: 116px; výška: 116px; okraj: 0 10px 10px 0; plávajúci: vľavo; zobrazenie : block; box-sizing: border-box; padding: 4px; border: 1px solid # d2d2d2; border-radius: 6px; position: relativní;) .images a: hover (border-color: # 428bcb;) .images span (šírka: 100 %; výška: 100 %; poloha: absolútna; hore: 0; vľavo: 0; zobrazenie: blok; opakovanie na pozadí: bez opakovania; veľkosť pozadia: obsahovať; poloha na pozadí: stred;)

Momentálne vyzerá formulár takto:

Teraz musíme pridať skript, ktorý by mal poskytovať nasledujúce funkcie:

Po kliknutí na prvok sekcie by sa malo otvoriť modálne okno s výberom súboru.

Pri presúvaní súborov z prieskumníka do okna prehliadača by mal byť prvok sekcie zvýraznený ako pri prejdení myšou (na tento účel sme pridali CSS triedu „dd“). Pri uvoľňovaní súborov (ako aj pri výbere súboru z dialógového okna) by sa obrázky mali nahrať na server.

Pri nahrávaní súborov je potrebné pridať indikátor a zobraziť priebeh nahrávania.

V prípade chyby na serveri je potrebné zobraziť chyby a skryť indikátor.

Ak sa obrázky úspešne odovzdajú na server, musíte ich zobraziť v kontajneri obrázkov.

Nasledujúci skript (súbor script.js) rieši všetky vyššie uvedené otázky:

$ (funkcia () (// Programovo otvorte okno výberu súboru kliknutím na $ ("obrázok"). on ("kliknutie", funkcia () ($ (": súbor"). spúšť ("kliknutie");)) / / Pri presúvaní súborov do formulára zvýraznite $ ("sekcia"). On ("dragover", funkcia (e) ($ (toto) .addClass ("dd"); e.preventDefault (); e.stopPropagation ( ); )); // Zabránenie predvolenej akcii pre udalosť dragenter $ ("sekcia"). On ("dragenter", funkcia (e) (e.preventDefault (); e.stopPropagation ();)); $ ("sekcia" " ) .on ("dragleave", funkcia (e) ($ (toto) .removeClass ("dd");)); $ ("sekcia"). on ("drop", funkcia (e) (ak (e . originalEvent.dataTransfer) (if (e.originalEvent.dataTransfer.files.length) (e.preventDefault (); e.stopPropagation (); // Zavolajte funkciu nahrávania. Presunuté súbory sú obsiahnuté // v e.originalEvent Nahrávanie vlastnosti .dataTransfer.files (e.originalEvent.dataTransfer.files);)))); // Nahrávanie súborov klasickým spôsobom - cez modálny $ (": súbor"). on ("zmena", funkcia () (nahrať ($ (toto) ... rekvizita ("súbory")); )); )); // Funkcia nahrávania súboru funkcia nahrávania (súbory) (// Vytvorenie objektu FormData var formData = new FormData (); // Prechádzať všetky súbory pre (var i = 0; i< files.length; i++) { // С помощью метода append() добавляем файлы в объект FormData formData.append("file_" + i, files[i]); } // Ajax-запрос на сервер $.ajax({ type: "POST", url: "/Home/Upload", // URL на метод действия Upload контроллера HomeController data: formData, processData: false, contentType: false, beforeSend: function () { $("section").removeClass("dd"); // Перед загрузкой файла удалить старые ошибки и показать индикатор $(".error").text("").hide(); $(".progress").show(); // Установить прогресс-бар на 0 $(".progress-bar").css("width", "0"); $(".progress-value").text("0 %"); }, success: function (data) { if (data.Error) { $(".error").text(data.Error).show(); $(".progress").hide(); } else { $(".progress-bar").css("width", "100%"); $(".progress-value").text("100 %"); // Отобразить загруженные картинки if (data.Files) { // Обертка для картинки со ссылкой var img = ""; pre (var i = 0; i< data.Files.length; i++) { // Сгенерировать вставляемый элемент с картинкой // (символ 0 заменяем ссылкой с помощью регулярного выражения) var element = $(img.replace(/0/g, data.Files[i])); // Добавить в контейнер $(".images").append(element); } } } }, xhrFields: { // Отслеживаем процесс загрузки файлов onprogress: function (e) { if (e.lengthComputable) { // Отображение процентов и длины прогресс бара var perc = e.loaded / 100 * e.total; $(".progress-bar").css("width", perc + "%"); $(".progress-value").text(perc + " %"); } } }, }); }

Ak chcete uložiť zoznam súborov a preniesť ho na server cez Ajax, použite Objekt FormData.

Upozorňujeme, že je zodpovedný za sledovanie priebehu sťahovania vlastnosť xhrFields objekt odovzdaný metóde $ .ajax. Táto vlastnosť ukladá objekt s funkciou spracovania udalostí onprogress... Do tejto udalosti sa odovzdá objekt s načítanými vlastnosťami – množstvo už načítaných údajov a súčet – celková veľkosť údajov. Vďaka týmto dvom parametrom môžeme na indikátore zobraziť priebeh sťahovania.

V metóde $ .ajax () odkazujeme na metódu akcie Upload HomeControllera, ktorá ešte nebola pridaná. Poďme to opraviť a upraviť súbor HomeController.cs:

Používanie systému; pomocou System.Web; pomocou System.Linq; pomocou System.Web.Mvc; pomocou System.Collections.Generic; pomocou System.IO; priestor názvov UploadFiles.Controllers (verejná trieda HomeController: Controller (verejný ActionResult Index () (návrat zobrazenia ();) public JsonResult Upload () (reťazec __filepath = Server.MapPath ("~ / uploads"); int __maxSize = 2 * 1024 * 1024; // maximálna veľkosť súboru 2 MB // povolené typy MIME pre zoznam súborov mimes = nový zoznam („obrázok / jpeg“, „obrázok / jpg“, „obrázok / png“); var výsledok = nový výsledok (Súbory = nový zoznam ()); if (Request.Files.Count> 0) (foreach (reťazec f v Request.Files) (súbor HttpPostedFileBase = Request.Files [f]; // Vykonanie kontroly platnej veľkosti a formátu súboru if (file.ContentLength> __maxSize) ( result.Error = "Veľkosť súboru nesmie presiahnuť 2 MB"; break;) else if (mimes.FirstOrDefault (m => m == file.ContentType) == null) (result.Error = "Neplatný formát súboru"; break ;) // Uložte súbor a vráťte URL, ak (Directory.Exists (__ filepath)) (Guid guid = Guid.NewGuid (); file.SaveAs ( [e-mail chránený]"(__filepath) \ (guid). (file.FileName)"); result.Files.Add ($ "/ uploads / (guid). (file.FileName)"); ))) návrat Json (výsledok); )) public class Výsledok (verejný reťazec Chyba (get; set;) public List Súbory (získať; nastaviť;)))

Tu dostávame súbory z Indexer súborov objekt HttpRequestBase ktorý je dostupný v radiči ASP.NET prostredníctvom vlastnosti Request. Ďalej vykonáme dve jednoduché kontroly – veľkosť súboru nesmie presiahnuť 2 MB a typ súboru musí byť buď JPG alebo PNG. Ak súbor nezodpovedá kontrolám, do skriptu sa vráti objekt s chybou a zobrazí sa používateľovi. V opačnom prípade sa súbor uloží do priečinka uploads projektu, je mu priradený náhodný názov vygenerovaný pomocou GUID.

Pred testovaním tohto príkladu nezabudnite pridať priečinok pre nahrávanie do koreňového adresára projektu.

Pravdepodobne mnohí narazili na otázku „Ako nahrať súbor na server pomocou JS a JQuery?“.
A asi nie každému sa to podarilo. V skutočnosti nie je všetko také zložité, ako sa zdá.
V tomto návode popíšem proces nahrávania súboru na server (hosting).
Technológia Ajax sa používa na výmenu údajov medzi prehliadačom a webovým serverom.
Verzia jQuery použitá v recepte je 2.2.2.

Vytvorte primitívne značky z html, head a body tag.
Do tagu head musíte napísať cestu ku knižnici jquery.
Ako príklad používam jquery zo servera Google.

V tagu body vytvoríme formulár, ktorý sa skladá zo vstupného tagu a tlačidla.
Typ vstupu = "súbor" sa používa na výber súboru na odovzdanie.
Značka tlačidla je potrebná na spustenie kódu js na prenos súborov.

Nastavte formulár na name = "uploader", enctype = "multipart / form-data", method = "POST".
Názov formulára: name = "uploader"
Metóda kódovania údajov formulára: enctype = "multipart / form-data"
Spôsob prenosu údajov: metóda = "POST"

Odoslať tento súbor: Stiahnuť ▼

Všetky kódy značiek html a js:

Odoslať tento súbor: Stiahnuť ▼

Prejdime ku kódu java skriptu.
Ak chcete preniesť súbor, musíte odoslať celý formulár:
$ („formulár“). odoslať (funkcia (e) (

Údaje formulára načítame do premennej:
var formData = new FormData ($ (toto));

Ďalej používame technológiu ajax na prenos údajov na webový server.
Ak bol súbor úspešne prenesený, vo vyskakovacom okne sa zobrazí zodpovedajúca správa.
Ak sa vyskytne chyba alebo súbor chýba, zobrazí sa hlásenie s textom problému.
$ .ajax ((url: "file.php", typ: "POST", údaje: formData, async: false, success: function (msg) (alert (msg);), error: function (msg) (alert ( "Chyba!");), Cache: false, contentType: false, processData: false));

Všetok kód java skriptu pomocou jquery:

Teraz existuje kód na strane servera na prijímanie údajov z formulára pomocou metódy požiadavky POST.

Získame koreňový adresár lokality a priradíme priečinok na sťahovanie súborov:
$ uploaddir = $ _SERVER ["DOCUMENT_ROOT"]. DIRECTORY_SEPARATOR. "uploads" .DIRECTORY_SEPARATOR;

Čítame súbor na stiahnutie:
$ uploadfile = $ uploaddir. základný názov ($ _ FILES ["súbor používateľa"] ["názov"]);

Skontrolujte, či je súbor načítaný.
V súlade s došlými údajmi priraďujeme sprievodnú správu.
Ak súbor nie je nahraný, nahrajte ho do adresára uvedeného v $ uploadfile:
if (move_uploaded_file ($ _ FILES ["userfile"] ["tmp_name"], $ uploadfile)) ($ out = "Súbor je platný a úspešne nahraný. \ n";) else ($ out = "Potenciálny útok pri nahrávaní súboru ! \ n " ;)

Keď sa vykonajú zadané akcie, vráti sa odpoveď.

Všetky php kódy:

Všetky html kódy vrátane js:

Odoslať tento súbor: Stiahnuť ▼

Stiahnite si zdrojový súbor:

Nahrávanie súborov alebo obrázkov na server je pomerne bežná úloha. Pokrok sa však nezastaví, a preto teraz, samozrejme, chcem, aby sťahovanie súborov prebiehalo na pozadí. Spravidla to bolo možné skôr pomocou technológie flash alebo iframe. Mnohí tiež používajú doplnky ako jQuery Form Plugin alebo Ajax File Upload Plugin alebo Multiple File Upload Plugin a veľa ďalších. So zavedením objektu FormData sa veci oveľa zjednodušili. FormData () vám umožňuje zostaviť množinu údajov na odoslanie na server pomocou XMLHttpRequest.

Skúsme si napísať vlastný kód bez akýchkoľvek pluginov (samozrejme okrem rámca jQuery) na nahrávanie obrázkov alebo súborov na server na pozadí. Vo všeobecnosti bude algoritmus našich akcií asi takýto: polia formulára vyplníme údajmi. Polia môžu byť čokoľvek, čo sa vám páči, text, textová oblasť, výber a súbory. Keď vyberiete súbory, vďaka nášmu kódu jQuery sa tieto súbory načítajú na pozadí do dočasného adresára na serveri, napríklad „tmp“. Ďalej, keď kliknete na tlačidlo odoslať formulára, údaje sa odošlú do skriptu servera, ktorý tieto údaje spracuje. Predstavme si, že ide o články. Prenesené údaje zapíšeme do databázy s jedinečným ID. Ďalej vytvorte adresár v adresári „images“ s jedinečným číslom „id“ a ak sme mali nejaké súbory v priečinku „tmp“, skopírujeme ich do vytvoreného priečinka „id“ a potom vymažeme priečinok „tmp“ . Aby sme to zhrnuli: obrázky vyplníme v tmp pozadím, pri odoslaní formulára zapíšeme údaje do databázy, budeme mať jedinečné číslo záznamu. Vytvorte priečinok s týmto číslom a presuňte tam naše súbory. Všetko. V tomto článku nebudeme uvažovať o nahrávaní do databázy a kopírovaní súborov. Myslím, že každý bude mať niečo svoje. Zameriame sa na jednu vec – asynchrónne načítavanie obrázkov (alebo súborov).

Takže tu je náš html kúsok. Tu dávame pozor na to, že máme súbor GIF s obrázkom pomocou preloaderu (zacyklený kruh), ktorý skryjeme pred zobrazením so štýlmi. Tiež priraďte id = file do poľa súboru a enctype = "multipart / form-data" k formuláru. Názov poľa súboru bude súbor t.j. aby sme mohli pracovať s poľom, keďže môžeme nahrať viacero súborov (atribút multiple).

Pridajte informácie

V tomto formulári máme okrem poľa so súborom aj niekoľko polí, napríklad: vstup = text. Tie. pred nami je bežný formulár, napríklad pre admin panel, čo je sada polí, ktoré potrebujete. Na začiatok, ak chcete, môžete skontrolovať fungovanie skriptu tak, že na začiatok súboru napíšete riadky zobrazujúce pole FILES:

//upload.php print_r ($ _ FILES);

Teraz napíšme náš skript na strane servera, ktorý sa bude volať pomocou jQuery. Jeho úlohou je preniesť nahrané súbory z dočasného adresára servera napríklad do nášho, ako sme sa rozhodli v „tmp“, a následne ich zobraziť.

//upload.php funkcia show_dir ($ dir) // funkcia zobrazenia obrázkov z priečinka tmp ($ zoznam = scandir ($ dir); nenastavené ($ zoznam, $ zoznam); foreach ($ zoznam ako $ súbor) (echo " ";)) foreach ($ _FILES ako $ kľúč => $ hodnota) (// presun súborov do tmp move_uploaded_file ($ hodnota [" tmp_name "]," tmp /".$ hodnota ["name"]);) show_dir ( "./tmp/");

A teraz náš js-script, ktorý nahrá naše súbory na server na pozadí. Všetky kúzla budú vykonané vďaka objektu FormData (). Tento kód pridáme na koniec nášho index.php pred značku.

Zdá sa, že to je všetko. Ak niekto nerozumie, pýtajte sa. Ak má niekto doplnky, budem rád!
Tip: ak ste ešte nepoužili kód na mazanie súborov zo žiadneho adresára, potom odporúčam zmeniť funkciu rmdir delete na echo pre test, aby ste sa uistili, že budú vymazané iba tie súbory, ktoré chcete vymazať. Preloadery Gif si môžete vziať napríklad z môjho tutoriálu Ako urobiť animáciu Gif. Príklady na konci článku.

UPD:

Ak chce niekto pridať krásu, napríklad indikátor priebehu, potom na to budeme musieť pridať niekoľko riadkov kódu. Do html šablóny pridáme super element z html5 - progress a do js kódu pridáme niekoľko riadkov s objektom XMLHttpRequest.
A tak bude náš html doplnený o nasledovné:

A pridajte do kódu js:

Funkcia progressHandlingFunction (e) (if (e.lengthComputable) ($ ("progress"). Attr ((hodnota: e.loaded, max: e.total));))

Xhr: function () (var myXhr = $ .ajaxSettings.xhr (); if (myXhr.upload) (// skontrolujte, či sa nahráva myXhr.upload.addEventListener ("progress", progressHandlingFunction, false); // prenos na hodnoty funkcie ) vrátiť myXhr ;)

Konečný výsledok js kódu:

Väčšina webových aplikácií, ktoré majú funkciu publikovania materiálov, obsahuje formulár na nahrávanie súborov na server. Je potrebné si uvedomiť, že štandardné pole pre nahrávanie súborov na server je problematicky štylizované a neposkytuje možnosť správne sa prispôsobiť vašim úlohám, z týchto a iných dôvodov je použitie jednoduchého nahrávacieho poľa určite vecou. minulosť.

Poďme sa rozprávať o dnešku. Dnes sa pre pohodlnejšie načítavanie obrázkov čoraz viac využíva technológia Ajax, ktorá umožňuje nahrávať obrázky na server bez opätovného načítania stránky. Navyše pomocou tejto technológie bolo možné flexibilnejšie integrovať funkcionalitu nahrávania súborov na server s rozhraním webových aplikácií, napríklad s rôznymi vizuálnymi editormi.

Je to hodnotná alternatíva k štandardnému serverovému odosielateľovi súborov. Jednoduché, intuitívne menu s niekoľkými príkazovými tlačidlami. Umožňuje vybrať množinu súborov na odovzdanie, vybrané súbory sú zoradené v zozname frontu sťahovania, čo je vizuálne zobrazené vo formulári. Proces sťahovania sprevádza animovaný indikátor priebehu. Nakladač je možné ľubovoľne štylizovať pomocou CSS a XHTML. Plugin používa knižnicu MooTools a funguje vo všetkých moderných prehliadačoch.

- rovnako dobrý ako predchádzajúci zavádzač súborov, implementovaný v jQuery. Doplnok je konfigurovateľný pre nahrávanie jedného aj viacerých súborov. Súbory vybrané na stiahnutie sú usporiadané do zoznamu. Pre každý súbor na stiahnutie sa zobrazí animovaný panel priebehu sťahovania. Rozhranie je jednoduché a nenápadné, príkazových tlačidiel minimum. Na fungovanie je potrebná aj podpora Flash. Integrácia do projektu je pomerne jednoduchá. Distribuovaný pod licenciou GPL a MIT, to znamená, že plugin je možné použiť aj pre komerčné produkty.

Valum's AJAX File Uploader v2.0

Valum's AJAX File Uploader- Ďalší z jednoduchých, ale pohodlných nahrávačov súborov na server. Každý, kto predtým musel tento produkt používať, si všimne, že projekt naďalej žije. Už teraz druhá verzia, do istej miery upravená. Celkom jednoduché rozhranie, sťahovanie súborov, ako v predchádzajúcich zavádzačoch, je sprevádzané vizuálnou indikáciou stavu priebehu sťahovania. Funguje vo všetkých moderných prehliadačoch a na svoju prácu nevyžaduje ďalšie knižnice.

Formulár na odovzdanie viacerých súborov AJAX pomocou jQuery

Nakladač bol vytvorený vývojármi WebDeveloper +, zjavne nebol plánovaný ako samostatný projekt, jeho názov je banálny. To však neznamená, že je zlý, môže byť rovnako užitočný ako vyššie spomínané pluginy. Rozhranie je jednoduché, jedno tlačidlo, pomocou ktorého si môžete vybrať sadu súborov na nahranie na server. Počas načítavania sa zobrazujú miniatúry obrázkov. Vývojársky blog obsahuje popis aplikácie. Doplnok tiež vyžaduje, aby fungovala knižnica jQuery.

- plugin pre nahrávanie súborov na server. Doplnok na fungovanie využíva knižnicu jQuery. Demo stránka webu popisuje možnosti nastavenia vzhľadu pluginu, ktoré je možné v určitých prípadoch použiť. Nahrávací formulár má lištu priebehu, zobrazuje sa aj percento dokončenia - to som v predchádzajúcich pluginoch nepridával, v niektorých sú aj prítomné. Vizuálne je všetko pohodlné a jednoduché. Po naštylovaní sa môže pekne hodiť do rozhrania vášho projektu.

Doplnok na nahrávanie súborov implementovaný pomocou jQuery. Používateľ bude musieť vybrať niekoľko súborov samostatne a potom stlačením tlačidla spustíte sťahovanie súborov. Sťahovanie súborov je sprevádzané indikátorom, ktorý zobrazuje rýchlosť sťahovania, objem sťahovania a čas do konca.

Toto je veľmi zaujímavý článok o tom, ako nahrať súbory na server pomocou technológie AJAX. Ako už viete, ajax je asynchrónny javascript, ktorý vám umožňuje pracovať so serverom bez opätovného načítania stránok v prehliadači. Táto technológia je veľmi užitočná na implementáciu našej myšlienky: nahrávanie súborov na server bez opätovného načítania stránok prehliadača. Náš nápad sa dá realizovať aj inak, o tom všetkom si prečítajte nižšie v našom článku.

Čo sa dnes naučíme?

Nahrávanie súborov na server pomocou AJAX + jQuery + PHP

Implementácia nahrávania súborov na server pomocou AJAX je o niečo zložitejšia ako len odosielanie textovej požiadavky POST alebo GET. Ale nie je také ťažké pochopiť a zvládnuť túto techniku. Ak stále úplne nerozumiete tomu, ako AJAX a PHP interagujú, odporúčam prečítať si článok o. Ale aj keď neviete, ako technológia AJAX funguje, nie je to veľký problém, pretože budeme používať knižnicu a doplnok jQuery ajax_upload... A ak budete postupovať podľa všetkých príkladov a pokynov krok za krokom, môžete na server implementovať skvelý nástroj na nahrávanie súborov.

Podstata metódy: Vytvoríme HTML obrázok zavádzača, ktorý bude obsahovať: pole na zadanie súboru, potvrdzovacie tlačidlo, blok stavu sťahovania (zobrazí sa: „načítané“ alebo „chyba“), zoznam ul (budú pridané nové prvky DOM , inými slovami, toto je zoznam nahraných súborov). Vytvoríme JS handler pre tlačidlo Odoslať pomocou syntaxe jQuery a prenesieme súbor do pluginu ajax_upload, ktorý odošle súbor a všetky potrebné údaje na stranu servera. Na strane servera je naša PHP aplikácia, ktorá uloží súbor do požadovaného priečinka a vráti výsledok práce. Alebo jednoducho vráti chybovú správu, ak sa niečo pokazí. Máte úlohu, môžeme začať?

HTML kódajax downloader

Vytvorme súbor HTML, ktorý obsahuje kostru nášho načítača súborov. Dám HTML kód, potom vysvetlím čo a čo.

Ako vidíte, HTML ajax nakladača je neúnosne zložitý. Stále však stojí za to objasniť, čo a čo:

< divid = "odovzdať ">NahraťSúbordiv>- toto je naše tlačidlo na potvrdenie nahrávania súboru na server. Nižšie je uvedený kód rozloženia CSS.

< rozpätieid = "stav ">rozpätie>- toto je blok, do ktorého umiestnime odpoveď zo serverovej strany aplikácie. Buď Načítané alebo Chyba.

< ulid = "súbory ">ul> je zoznam súborov, ktoré boli nahrané na server naším jquery + ajax uploaderom.

Ako som sľúbil, nižšie uvediem kód štýlu CSS pre tlačidlá na potvrdenie odovzdania súboru:

#upload (margin: 30px 200px; padding: 15px; font-weight: bold; font-size: 1.3em; font-family: Arial, Helvetica, sans-serif; text-align: center; background: # f2f2f2; color: # 3366cc; okraj: 1px plný #ccc; šírka: 150px; kurzor: ukazovateľ! Dôležité; -moz-border-radius: 5px; -webkit-border-radius: 5px;)

ServerPHP strana aplikácie

Ako je uvedené v podstate metódy, serverová strana iba skopíruje (uloží) súbor a vráti výsledok svojej práce ("Načítané" alebo "Chyba"). Ale toto je len príklad, na ktorý sa netreba spoliehať. Neexistuje žiadna ochrana proti vlámaniu hackerov a nie je nastavený žiadny limit veľkosti súboru. Ak sa chystáte vytvoriť downloader na všeobecné použitie, nezabudnite implementovať vyššie uvedené doplnky. Nižšie je uvedený PHP kód príkladu súboru na nahrávanie, vytvorte súbor s názvom nahrať-súbor.php a vložte do nej nasledujúci kód:

Ak sa pozriete pozorne, všimnete si, že tu je všetko napísané v ruskom texte, alebo skôr:

$ uploaddir- adresár na serveri, do ktorého budú nahrané súbory.

$ súbor- názov nahrávaného súboru, ku ktorému je pripojená cesta k adresáru servera.

Najjednoduchšia vec už bola urobená. Zábavná časť je pred nami – strana jQuery + AJAX nahrávača súborov.

JavaScript kód

Ako pri každej aplikácii používajúcej JS, kód musí byť umiestnený v hlavičke dokumentu. Ďalšia dôležitá poznámka: pred napísaním tohto JS kódu nezabudnite vopred zahrnúť knižnicu. jQuery a plugin ajax_nahrať... Ak ste to už urobili, skvelé, začnime kódovať:

$ (funkcia () (var btnUpload = $ ("# upload"); var status = $ ("# stav"); new AjaxUpload (btnUpload, (akcia: "upload-file.php", // Názov súboru názov vstupného poľa: "uploadfile", onSubmit: function (file, ext) (if (! (ext && / ^ (jpg | png | jpeg | gif) $ /. test (ext))) (// Overenie stavu prípon súboru .text (Iba súbory JPG, PNG, GIF "); vrátiť hodnotu false;) status.text (" Nahráva sa ... ");), onComplete: funkcia (súbor, odpoveď) (// Vymazať text stavu status.text ( " ") ; // Pridať nahrané súbory do hárka if (odpoveď === "úspech") ($ (""). AppendTo ("# súborov"). Html ("
"+ súbor) .addClass (" úspech ");) else ($ (" "). appendTo (" # súborov ". text (súbor) .addClass (" chyba ");))));));

Najprv inicializujeme prístup k tlačidlu na potvrdenie stiahnutia a zapíšeme do premennej btnUpload... Zároveň získame prístup k bloku správ servera ( postavenie). Nasleduje práca s pluginom ajaxnahrať... Vytvoríme nový objekt a špecifikujeme parametre, ktoré potrebujeme:

Akcia- cesta k nášmu obslužnému programu servera pre nahrané súbory.

názov- toto je názov vstupného poľa, z ktorého dostaneme súbor nahraný na server.

onOdoslať- Funkcie, ktoré sa vykonávajú pred ajaxovým nahraním súborov na server. V našom prípade ide o overenie nahraných súborov (kontrola podporovaných prípon). Ale znova skontrolujte, ako sa hovorí pre „tupých“, túto kontrolu je ľahké obísť, takže sa oplatí znova skontrolovať na serverovej strane aplikácie.

postavenie.text- text, ktorý sa zobrazuje v procese nahrávania súborov ajax na server. Všimnite si, že ak súbory nie sú podporované, zobrazí sa chybové hlásenie.

onComplete- Funkciu spustíme po dokončení nahrávania súboru na server. V tejto funkcii: vymažte hodnotu status.text; pridajte nahrané súbory na hárok súbory.

Ako vidíte, nahrávanie súborov na server pomocou AJAX je jednoduchšie, ako sa zdalo. Napriek tomu som zmätený prítomnosťou knižnice jQuery v tejto metóde. A ak viete, ako implementovať nahrávanie súborov ajax bez použitia jQuery, napíšte do komentárov k článku.

Nahrávanie viacerých súborov na server pomocou AJAX, jQuery, PHP

Ak potrebujete pre svoje osobné potreby krásne nahrať niekoľko súborov na server pomocou AJAX a PHP, budete musieť použiť niektoré doplnky do knižnice jQuery. menovite:

jQuery Form Plugin v2.18

Plugin pre správnu ajax prácu s poľami a formulármi.

Kde získať: www.malsup.com/jquery/form/

jQuery BlockUI Plugin v2.14

Plugin, ktorý vám umožní zobrazovať pekné chybové hlásenia.

Kde získať: www.malsup.com/jquery/block/

jQuery Multiple File Upload Plugin v1.31

Doplnok pre knižnicu jQuery, ktorý vám umožňuje nahrať viacero súborov súčasne.

Kde získať: www.fyneworks.com/jquery/multiple-file-upload/

Ak ste si už stiahli všetky tieto pluginy a samozrejme knižnicu jQuery, môžeme začať s vývojom. Tiež musíme vytvoriť súbor PHP, ako v predchádzajúcom príklade, ktorý bude spracovávať údaje na strane servera. Nazvime to: doajaxfileupload.php... Teraz podrobnejšie.

Plugin formulára jQuery Je to skvelý doplnok, ktorý sa používa na odosielanie súborov na server pomocou metódy ajax. Tento doplnok má aj iné využitie.

Plugin jQuery BlockUI- používa sa na estetické účely, na zobrazenie krásnych správ o správnosti doplnku ViacnásobnéSúborNahraťZapojiť.

ViacnásobnéSúborNahraťZapojiť- tento plugin je základom nášho multi-file loaderu. Umožňuje vám vybrať viacero súborov. Zároveň disponuje flexibilným nastavením na obmedzenie typu súborov, nastavenie počtu nahrávaných súborov, kontrolu súboru, či sa v ňom nenachádzajú duplikáty (ak už bol takýto súbor vybratý) atď.

Teraz, keď máme všetko, čo potrebujeme, môžeme začať s vývojom ajax skriptu na nahrávanie viacerých súborov.

Myslím, že v súbore index.php je všetko jasné. Tu sa nachádza samotný formulár na nahrávanie súboru a je pripojená knižnica jQuery a všetky potrebné pluginy pre prácu s ajaxom. Niekoľko slov o konfigurácii kódu a pluginu:

$ (. MultiFile"). MultiFile ((akceptovať: "jpg | gif | bmp | png | rar", max.: 15, STRING: (odstrániť: "odstrániť", vybraté: "Vybraté: $ súbor", zamietnuté: " Nesprávny typ súboru: $ ext! ", Duplikát:" Tento súbor je už vybratý: \ n $ súbor! ")));

Zadajte prípony súborov povolené na nahrávanie, uveďte maximálny počet nahrávaných súborov.

$ ("# načítanie"). ajaxStart (funkcia () (((...));

Zobrazuje a odstraňuje animáciu, keď ajax nahráva súbory na server.

$ ("# uploadForm"). ajaxForm ((...));

Zodpovedá za odosielanie súborov na server.

doajaxfileupload.php- toto je naša serverová strana aplikácie, všetko je v nej dostatočne jasné, ak to potrebujete, môžete si to upraviť podľa seba.

Možno je to všetko o nahrávaní viacerých súborov na server pomocou AJAX, jQuery a PHP. Dúfam, že všetko funguje pre vás, rovnako ako pre mňa.

Nahrávanie súborov do JS + IFRAME + PHP

Ak nie ste fanúšikom krásy, ale funkčnosti a kompaktnosti kódu, máme pre vás dobrú správu. Nahrávanie súborov na server bez opätovného načítavania stránky je možné nielen pomocou AJAXu a všemožných doplnkov jQuery. Dá sa to urobiť aj pomocou obyčajného JavaScriptu, iframe (rámce) a php (vždy povinné). Ide o to, že v AJAX nie je možné implementovať nahrávanie súborov. XmlHttpRequest nemožno nahrať súbory. Aj keď, dá sa to obísť. S pomocou techniky Vzdialené skriptovanie... Najmä pomocou IFRAME... Zaujímavosťou je, že formulár vytvoríme ako pri bežnom nahrávaní súboru, len v takom tvare, aký uvedieme target = "rFrame", odkazujú na skrytý prvok iframe, ktorý sa znova načíta, ale nebude sa vizuálne zobrazovať. Po opätovnom načítaní sa zo servera php aplikácie vráti volanie funkcie JS, čím sa dokončí nahrávanie súboru.

Tento downloader je jednoduchý, pozostáva z dvoch súborov a váži približne 1 KB. Choďte k veci. Vytvorte si súbor HTML a vložte tam kód:

Tu vidíme takmer rovnaké komponenty ako pri jednoduchom nahrávaní súborov na server, len: cieľ = "rFrame"- o ktorom sme už hovorili vyššie; funkciu onResponse- prijíma objekt JSON, ktorý posielame zo strany servera. Tiež nezabudnite zahrnúť viacdielny /forma-údajov, bez ktorého formulár nenahrá súbory. Ďalej sa pozrime na serverový kód súboru handler.php:

window.parent.onResponse("".$obj.""); ";) $ dir =" / uploads "; // cesta k nahrávaciemu adresáru na serveri $ name = basename ($ _ FILES [" loadfile "] [" name "]); $ file = $ dir. $ name; $ success = move_uploaded_file ($ _ FILES ["loadfile"] ["tmp_name"], $ súbor); jsOnResponse ("(" názov súboru ":" ". $ meno." "," úspech ":" ". $ úspech. "")");?>

Serverová strana aplikácie je podobná prvému príkladu tohto článku, s výnimkou výstupu kódu javascript, ktorý sa spustí po opätovnom načítaní iframe a bude nás informovať o výsledku sťahovania súboru.

Veľmi jednoduchý a zaujímavý scenár. Môžete to samozrejme vylepšiť.