Frumos formular ajax pentru încărcarea fișierelor. Ajax și PHP. Încărcarea unei imagini pe server

Cum să încărcați orice fișiere, de exemplu, imagini pe server de la folosind AJAXși jQuery? Este destul de ușor de făcut! Și mai jos vom analiza totul în detaliu.

În acele vremuri „vechi”, când nu exista încă jQuery, sau poate exista unul, dar browserele nu erau atât de sofisticate, încărcarea unui fișier pe un site folosind AJAX era o sarcină plictisitoare: prin tot felul de cârje precum iframe. Nu am prins momentul acela și cui îi pasă acum? Dar acum altceva este interesant - că salvarea fișierelor pe site este foarte simplă. Chiar și un webmaster care nu are experiență și înțelegere a modului în care funcționează AJAX va putea să-și dea seama rapid ce se întâmplă. Și acest articol îl va ajuta. Dacă faceți copii de rezervă ale acestor capacități cu funcții WordPress, atunci procesarea și încărcarea în siguranță a fișierelor pe server devine o sarcină complet trivială și chiar interesantă (de exemplu cu WordPress, vezi sfârșitul articolului).

Cu toate acestea, oricât de simplu este totul, trebuie remarcat că o experiență minimă de lucru cu fișiere și cunoștințe de bază despre Javascript, jQuery și PHP sunt încă necesare! Cel puțin, trebuie să vă imaginați cum sunt încărcate fișierele pe server, ca în schiță generală AJAX funcționează și trebuie să puteți citi și înțelege codul măcar puțin.

Metoda descrisă mai jos este destul de stabilă și se bazează în esență pe obiect Javascript nou FormData() , suport de bază care este disponibil în toate browserele.

Pentru o percepție mai înțeleasă a materialului, acesta este împărțit în pași. Atât, hai să zburăm...

Totul începe cu prezența unui câmp de intrare de tip fișier pe site. Nu este necesar ca acest câmp să facă parte din formular (etichetă).

Astfel, avem cod HTML cu un câmp de fișier și un buton „Încărcați fișiere”.

descărcați fișiere

Primul pas este să obțineți datele fișierelor descărcate.

Când faceți clic pe câmpul fișierului, apare o fereastră de selectare a fișierelor. După selecție, datele despre acestea sunt salvate în câmpul de introducere și trebuie să „preluăm” de acolo. Pentru a face acest lucru, vom atașa o funcție la evenimentul de modificare JS care va salva datele existente din câmpul fișierului în fișierele variabile JS:

Fișiere Var; // variabil. va contine date fisierului // umple variabila cu date atunci cand valoarea campului se schimba fisierul $("input").on("change", function())( files = this.files; ));

Avem datele fișierului, acum trebuie să le trimitem prin AJAX. Atribuim acest eveniment unui clic pe butonul „Încărcați fișiere”.

În momentul clicării, creăm un nou obiect new formData() și adăugăm date din variabila fișiere la acesta. Folosind formData() ne vom asigura că datele trimise arată ca și cum am fi trimis pur și simplu formularul în browser.

Pentru ca o astfel de solicitare să aibă loc, trebuie să fie specificați parametri AJAX suplimentari în jQuery, deci funcția obișnuită $.post() nu este potrivită și folosim un analog mai flexibil: $.ajax() .

Două importante parametri suplimentari trebuie setat la false:

ProcessData Dezactivează procesarea datelor transmise. Implicit, de exemplu, pentru solicitări GET jQuery colectează datele într-un șir de interogare și adaugă acel șir la sfârșitul adresei URL. Pentru Date POST face alte transformări. Orice modificare a datelor sursă va interfera cu noi, așa că dezactivăm această opțiune... contentType Dezactivează setarea antetului tipului de solicitare. Mod implicit Instalare jQuery este egal cu „application/x-www-form-urlencoded”. Acest antet nu acceptă trimiterea de fișiere. Dacă setați acest parametru la „multipart/form-data”, PHP tot nu va putea recunoaște datele transferate și va afișa un avertisment „Lipsă limită în multipart/form -data”... În general, cel mai simplu mod este să dezactivați această opțiune, atunci totul funcționează! // procesare și trimitere Solicitare AJAX când faceți clic pe butonul upload_files $(".upload_files").on("click", function(event)( event.stopPropagation(); // oprirea tuturor evenimentelor JS curente event.preventDefault(); // oprirea implicită eveniment pentru elementul curent - faceți clic pentru tag // nu face nimic dacă fișierele este goală if(typeof files == "undefined") return; // creează un obiect de date de formular var data = new FormData(); // umple obiectul de date cu fișiere într-un format potrivit pentru trimiterea $.each(fișiere, funcție(cheie, valoare)( data.append(cheie, valoare); )); // adaugă o variabilă pentru a identifica cererea data.append("my_file_upload", 1); // Solicitare AJAX $.ajax(( url: "./submit.php", tip: "POST", // important! date: date, cache: false, dataType: "json", // dezactivează procesarea datelor transmise , lăsați-le să fie transmise așa cum este processData: false, // dezactivează setarea antetului tipului de cerere. Deci jQuery va spune serverului că acesta este un șir de solicitare contentType: false, // funcție a succesului răspunsului cu succes al serverului: function(respond, status, jqXHR)( // OK - fișierele încărcate if(typeof respond.error === "undefined")( // afișează căile fișierelor descărcate în blocul ".ajax-reply" var files_path = respond.files; var html = ""; $.each(files_path, function(key, val)(html += val +"
"; )) $(".ajax-reply").html(html); ) // eroare else ( console.log("EROARE: " + respond.error); ) ), // eroare de funcție de eroare de răspuns a serverului: function(jqXHR, status, errorThrown)( console.log("AJAX request ERROR: " + status, jqXHR); ) )); ));

Acum ultimul pas: cererea trimisă trebuie procesată.

Pentru a fi mai clar, vom procesa cererea fără verificări suplimentare pentru fișiere, adică salvați doar fișierele primite în folderul dorit. Deși, pentru securitate, fișierele trimise trebuie verificate, cel puțin extensia (tipul) fișierului...

Să creăm un fișier submit.php cu următorul cod (se presupune că submit.php se află în același folder cu fișierul din care este trimisă cererea AJAX):

jQuery(document).ready(funcție($)( // link către fișier AJAX var handler ajaxurl = ""; var nonce = ""; fișiere var; // variabil. va contine date fisierului // umple variabila cu date atunci cand valoarea campului se schimba fisierul $("input").on("change", function())( files = this.files; )); // prelucrare și Trimiterea AJAX cerere când faceți clic pe butonul upload_files $(".upload_files").on("click", function(event)( event.stopPropagation(); // oprirea tuturor evenimentelor JS curente event.preventDefault(); // oprirea eveniment implicit pentru elementul curent - faceți clic pentru tag // nu face nimic dacă fișierele este goală if(typeof files == "undefined") return; // creează datele fișierului într-un format potrivit pentru trimiterea de date var = new FormData(); $.each(fișiere, funcție(cheie, valoare)( data.append(cheie, valoare); )); // adaugă o variabilă de identificare a cererii data.append("action", "ajax_fileload"); data.append("nonce", nonce); data.append("post_id", $("corp").attr("clasa").match(/postid-(+)/)); var $reply = $(".ajax-reply"); // Solicitare AJAX $reply.text("Se încarcă..."); $.ajax(( url: ajaxurl, tip: "POST", date: date, cache: false, dataType: "json", // dezactivați procesarea datelor transmise, lăsați-le să fie transmise așa cum este processData: false, // dezactivați setarea antetului tipului Deci jQuery va spune serverului că acesta este un șir de solicitare contentType: fals, // funcția unui răspuns de succes al serverului succes: function(respond, status, jqXHR)( // OK if(respond.success)( $ .each(respond.data, function (key, val)( $reply.append(""); )); ) // eroare else ( $reply.text("EROARE: " + respond.error); ) ), // eroare de răspuns server eroare funcție: function(jqXHR, status, errorThrown)( $reply.text("AJAX request ERROR: " + status); ) )); )); ))