Încărcarea imaginii pe serverul jquery ajax php. Încărcare dinamică a fișierelor cu jQuery

Cum să încărcați orice fișiere, cum ar fi imagini, pe server 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() , care are suport de bază în toate browserele.

Pentru o percepție mai înțeleasă a materialului, acesta este împărțit în pași. Asta e tot, 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ă specificați parametri suplimentari în jQuery Parametrii AJAX, 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 „Liss boundary in multipart/form -data”... În general, cel mai simplu mod este să dezactivați această opțiune, atunci totul funcționează! // procesare ș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ă 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(function($)( // link la fișierul AJAX handler var ajaxurl = ""; var nonce = ""; var fișiere; // variabilă. va conține date fișier // completa variabila cu date când fișierul cu valorile câmpului modificat $("input").on("schimbare", function())(fișiere = this.files; )); // procesează și trimite o solicitare AJAX atunci când se face clic pe butonul upload_files $(" .upload_files").on ("click", function(event)( event.stopPropagation(); // oprirea tuturor evenimentelor JS curente event.preventDefault(); // oprirea evenimentului implicit pentru elementul curent - faceți clic pentru tag // nu face nimic dacă fișierele este goală if(typeof files == "undefined") return; // creează date de fișier î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); ) )); )); ))