Jinsi ya kupakia faili zozote, kama vile picha, kwa seva kwa kutumia AJAX na jQuery? Ni rahisi sana kufanya! Na hapa chini tutachambua kila kitu kwa undani.

Katika nyakati hizo za "zamani", wakati hapakuwa na jQuery bado, au labda kulikuwa na moja, lakini vivinjari havikuwa vya kisasa sana, kupakia faili kwenye tovuti kwa kutumia AJAX ilikuwa kazi ya kuchosha: kupitia kila aina ya magongo kama iframes. Sikupata wakati huo, na ni nani anayejali sasa? Lakini sasa kitu kingine kinavutia - kwamba kuhifadhi faili kwenye tovuti ni rahisi sana. Hata msimamizi wa wavuti ambaye hana uzoefu na uelewa wa jinsi AJAX inavyofanya kazi ataweza kujua haraka nini kinaendelea. Na makala hii itamsaidia. Ikiwa unacheleza uwezo huu na kazi za WordPress, basi usindikaji salama na kupakia faili kwenye seva inakuwa kazi isiyo na maana kabisa na hata ya kuvutia (kwa mfano na WordPress, angalia mwisho wa makala).

Hata hivyo, bila kujali jinsi kila kitu ni rahisi, ni lazima ieleweke kwamba uzoefu mdogo wa kufanya kazi na faili na maarifa ya msingi katika Javascript, jQuery na PHP bado zinahitajika! Kwa kiwango cha chini, unahitaji kufikiria jinsi faili zinapakiwa kwenye seva, kama katika muhtasari wa jumla AJAX inafanya kazi na unahitaji kuwa na uwezo wa kusoma na kuelewa kanuni angalau kidogo.

Njia iliyoelezwa hapo chini ni thabiti kabisa, na kimsingi inategemea Kitu cha Javascript new FormData() , ambayo ina usaidizi wa kimsingi katika vivinjari vyote.

Kwa mtazamo unaoeleweka zaidi wa nyenzo, imegawanywa katika hatua. Ni hayo tu, wacha turuke ...

Upakiaji wa Faili ya AJAX: Mfano Mkuu

Yote huanza na upatikanaji kwenye tovuti mashamba ya pembejeo aina ya faili. Hakuna haja ya uwanja huu kuwa sehemu ya fomu (tag).

Kwa hivyo, tuna msimbo wa HTML na uwanja wa faili na kitufe cha "Pakia Faili".

pakua faili

Hatua ya 1. Data kutoka kwa uga wa faili

Hatua ya kwanza ni kupata data ya faili zilizopakuliwa.

Unapobofya kwenye uwanja wa faili, dirisha la kuchagua faili linaonekana.Baada ya uteuzi, data juu yao imehifadhiwa kwenye uwanja wa pembejeo, na tunahitaji "kuichukua" kutoka hapo. Ili kufanya hivyo, tutaambatisha kitendakazi kwa tukio la mabadiliko la JS ambalo litahifadhi data iliyopo ya uwanja wa faili katika faili za kutofautisha za JS:

Var faili; // kutofautiana. itakuwa na data ya faili // kujaza utofauti na data wakati thamani ya shamba inabadilisha faili $("input").on("change", function())( files = this.files; ));

Hatua ya 2. Unda ombi la AJAX (kwa kubofya)

Tuna data ya faili, sasa tunahitaji kuituma kupitia AJAX. Tunaweka tukio hili kwa kubofya kitufe cha "Pakia faili".

Wakati wa kubofya tunaunda kitu kipya new formData() na ongeza data kutoka kwa kutofautisha kwa faili kwake. Kwa kutumia formData() tutahakikisha kwamba data iliyowasilishwa inaonekana kana kwamba tumewasilisha tu fomu katika kivinjari.

Ili ombi kama hilo lifanyike, unahitaji kutaja vigezo vya ziada katika jQuery Vigezo vya AJAX, Ndiyo maana kazi inayojulikana$.post() haifai na tunatumia analogi inayonyumbulika zaidi: $.ajax() .

Mbili muhimu vigezo vya ziada inahitaji kuwekwa kuwa uongo:

ProcessData Inalemaza uchakataji wa data inayotumwa. Kwa chaguo-msingi, kwa mfano, kwa PATA maombi jQuery hukusanya data katika mfuatano wa hoja na kuambatanisha mfuatano huo hadi mwisho wa URL. Kwa POST data hufanya mabadiliko mengine. Mabadiliko yoyote kwenye data chanzo yatatuingilia, kwa hivyo tunazima chaguo hili... contentType Huzima kuweka kichwa cha aina ya ombi. Chaguomsingi ufungaji wa jQuery ni sawa na "application/x-www-form-urlencoded". Kichwa hiki hakitumii kutuma faili. Ukiweka kigezo hiki kuwa "multipart/form-data", PHP bado haitaweza kutambua data inayohamishwa na itaonyesha onyo "Kukosa mpaka katika multipart/form -data"... Kwa ujumla, njia rahisi ni kulemaza chaguo hili, basi kila kitu hufanya kazi! // usindikaji na AJAX kutuma ombi unapobofya kitufe cha upload_files $(".upload_files").on("bofya", kazi(tukio)( event.stopPropagation(); // kusimamisha matukio yote ya sasa ya JS.preventDefault(); // kusimamisha tukio tukio chaguo-msingi kwa kipengele cha sasa - bofya kwa tag // usifanye chochote ikiwa faili ni tupu ikiwa (typeof files == "undefined") zinarudi; // unda kitu cha data ya fomu var data = FormData mpya (); // jaza kipengee cha data na faili katika umbizo linalofaa kutuma $.each(files, function(key, value)( data.append(key, value); )); // ongeza kigezo ili kutambua ombi data.append("my_file_upload", 1); // Ombi la AJAX $.ajax(( url: "./submit.php", aina: "POST", // muhimu! data: data, cache: uongo, dataType: "json", // zima usindikaji wa data zinazopitishwa , wacha zisambazwe kama ilivyo processData: false, // zima kuweka kichwa cha aina ya ombi. Kwa hivyo jQuery itaambia seva kuwa hili ni ombi la mfuatano wa contentType: false, // kazi ya mafanikio ya majibu ya seva: function(respond, status, jqXHR)( // SAWA - faili zilizopakiwa if(typeof respond.error === "undefined")( // onyesha njia za faili zilizopakuliwa katika ".ajax-reply" block var files_path = respond.files; var html = ""; $.each(files_path, function( key, val)( html += val +"
"; )) $(".ajax-reply").html(html); ) // kosa lingine ( console.log("ERROR: " + respond.error); ) ), // hitilafu ya hitilafu ya hitilafu ya majibu ya seva: function(jqXHR, status, errorThrown)( console.log("AJAX request ERROR: " + status, jqXHR); )); ));

Hatua ya 3. Shika ombi: pakia faili kwenye seva

Sasa hatua ya mwisho: unahitaji kushughulikia ombi lililotumwa.

Ili kuifanya iwe wazi zaidi, tutashughulikia ombi bila hundi za ziada kwa faili, i.e. hifadhi tu faili zilizopokelewa folda inayotaka. Ingawa, kwa usalama, faili zilizotumwa lazima ziangaliwe, angalau kiendelezi (aina) cha faili ...

Hebu tuunde faili ya submit.php na msimbo ufuatao (inachukuliwa kuwa submit.php iko kwenye folda sawa na faili ambayo ombi la AJAX limetumwa):

jQuery(document).ready(function($)( // link to file AJAX handler var ajaxurl = ""; var nonce = ""; var files; // variable. itakuwa na data ya faili // kujaza utofauti na data wakati faili ya thamani za sehemu iliyobadilishwa $("input").on("change", function())( files = this.files; )); // kuchakata na kutuma ombi la AJAX wakati kitufe cha upload_files kinapobofya $(" .upload_files"). kwenye ("bofya", kazi(tukio)( event.stopPropagation(); // kusimamisha matukio yote ya sasa ya JS.preventDefault(); // kusimamisha tukio chaguomsingi la kipengele cha sasa - bofya ili tag // usifanye chochote ikiwa faili ni tupu ikiwa (typeof files == "undefined") zinarudi; // unda data ya faili katika muundo unaofaa kwa kutuma data ya var = new FormData(); $.kila(faili, kazi(ufunguo, thamani)( data.append(ufunguo, thamani); )); // ongeza kitambulisho cha ombi data.append("hatua", "ajax_fileload"); data.append("nonce", nonce); data.append("post_id", $("body").attr("class").match(/postid-(+)/)); var $reply = $(".ajax-reply"); // AJAX ombi $reply.text("Inapakia..."); $.ajax(( url: ajaxurl, chapa: "POST", data: data, cache: false, dataType: "json", // zima uchakataji wa data inayotumwa, acha isambazwe kama ilivyo processData: uongo, // zima kuweka kichwa cha aina Kwa hivyo jQuery itaambia seva kuwa hii ni aina ya ombi la kamba: si kweli, // kazi ya mafanikio ya majibu ya seva: function(respond, status, jqXHR)( // OK if(respond.success)( $ .each(respond.data, chaguo za kukokotoa (ufunguo, val)( $reply.append(""); )); ) // kosa lingine ( $reply.text("ERROR: " + respond.error); ) ), // hitilafu ya utendaji wa hitilafu ya majibu ya seva: kazi(jqXHR, status, errorThrown)( $reply.text("AJAX request ERROR: " + status); ) )); )); ))
$(kazi() (
$("#faili_upload").pakia((
"formData" :(
"muhuri wa wakati" : "",
"ishara" : ""
},
"uploader" : "uploadify.php"
});
});

Faili ya mitindo ni ya kawaida kwa programu-jalizi hii, na pia inapakuliwa katika seti ya jumla ya faili kutoka kwa tovuti rasmi. Bila shaka, unaweza kuibadilisha kwa hiari yako.

jQuery na programu-jalizi yenyewe pia imeunganishwa. Ifuatayo, fomu inaundwa, na ingizo lenye aina = "faili" linapewa kitambulisho, ambacho kitatumika kwenye hati.

Hati yenyewe hupitisha data kwa formData . Yaani wakati wa sasa na ishara ya siri. Badala ya "chumvi_ya_kipekee" kunaweza kuwa na mfuatano wowote wa siri. Katika mali"uploader " передаётся скрипт-обработчик. Теперь сам код этого обработчика:!}

Nilitoa maoni juu ya msimbo, kwa hivyo nadhani haitakuwa ngumu kuelewa. Kitu pekee nitakachotambua ni kwamba hakuna hundi za kutosha hapa. Walakini, niliandika juu yake katika nakala tofauti.

ProgressBar pia imejengwa kwenye programu-jalizi hii, kwa hivyo kila kitu tayari kimefanywa kwa ajili yetu. Hii ndiyo faida maktaba za jQuery na programu-jalizi kwa ajili yake. Kazi ngumu sana, kama vile kupakia faili kwa nguvu kwenye seva iliyo na ProgressBar, ambayo itahitaji siku nzima ya usanidi na kisha siku chache zaidi kurekebisha makosa, inaweza kutatuliwa kwa dakika chache kwa kutumia programu-jalizi zilizotengenezwa tayari.

Pengine wengi wamekutana na swali "Jinsi ya kupakia faili kwenye seva kwa kutumia JS na JQuery?".
Na labda sio kila mtu aliweza kufanya hivi. Kwa kweli, kila kitu sio ngumu kama inavyoonekana.
KATIKA somo hili Nitaelezea mchakato wa kupakia faili kwenye seva (mwenyeji).
Teknolojia ya Ajax inatumika kubadilishana data kati ya kivinjari na seva ya wavuti.
Toleo la JQuery linalotumika katika mapishi: 2.2.2.

Tunaunda markup primitive kutoka vitambulisho vya html, kichwa na mwili.
KATIKA alama ya kichwa unahitaji kutaja njia ya maktaba ya jQuery.
Katika mfano ninatumia jQuery kutoka kwa seva ya google.

Katika lebo ya mwili tunaunda fomu ambayo inajumuisha lebo ya pembejeo na kifungo.
Kwa kutumia input type="file" unachagua faili ya kupakia.
Lebo ya kitufe inahitajika ili kuendesha msimbo wa js ili kuhamisha faili.

Tunaweka jina la fomu = " kipakiaji", enctype = "multipart/form-data", method="POST".
Jina la fomu: jina = "mpakiaji"
Njia ya usimbaji wa data: enctype="multipart/form-data"
Mbinu ya kuhamisha data: mbinu="POST"

Wasilisha faili hii: Pakia

Nambari zote za html na js:
Wasilisha faili hii: Pakia

Hebu tuendelee hati ya java kanuni.
Ili kuhamisha faili, lazima uhamishe fomu nzima:
$("fomu").wasilisha(kazi(e) (

Tunasoma data ya fomu katika kutofautisha:
var formData = new FormData($(hii));

Kisha, tunatumia teknolojia ya ajax kuhamisha data kwenye seva ya wavuti.
Ikiwa uhamishaji wa faili umefaulu, ujumbe utaonyeshwa kwenye dirisha ibukizi.
Ikiwa kosa linatokea au faili haipo, ujumbe utaonyeshwa na maandishi ya tatizo ambalo limetokea.
$.ajax(( url: "file.php", aina: "POST", data: formData, async: uongo, mafanikio: kazi (msg) ( alert(msg); ), error: function(msg) ( alert( "Hitilafu!"); ), akiba: uongo, contentType: uongo, mchakatoData: uongo ));

Nambari zote ziko kwenye hati ya java na kutumia jQuery:

Sasa kilichosalia ni msimbo wa upande wa seva ili kupokea data kutoka kwa fomu Mbinu ya POST ombi.

Tunapata saraka ya mizizi tovuti na upe folda ya kupakua faili:
$uploaddir = $_SERVER["DOCUMENT_ROOT"].DIRECTORY_SEPARATOR."vipakiwa".DIRECTORY_SEPARATOR;

Kusoma faili iliyopakuliwa:
$uploadfile = $uploaddir . basename($_FILES["userfile"]["jina"]);

Kuangalia ikiwa faili imepakiwa.
Kwa mujibu wa data inayoingia, tunatoa ujumbe unaoambatana.
Ikiwa faili haijapakiwa, ipakie kwenye saraka iliyobainishwa katika $uploadfile:
ikiwa (move_uploaded_file($_FILES["userfile"]["tmp_name"], $uploadfile)) ( $out = "Faili ni halali na ilipakiwa kwa mafanikio.\n"; ) else ( $out = "Shambulio linalowezekana la kupakia faili !\n";)

Kwa kufanya vitendo vilivyobainishwa majibu yanarudishwa.

Nambari zote katika php:

Wote nambari ya html ikiwa ni pamoja na js:

Wasilisha faili hii: Pakia $("form").submit(function(e) ( var formData = new FormData($(this)); $.ajax(( url: "file.php", type: "POST", data: formData, async: uongo, mafanikio: kazi (msg) ( alert(msg); ), kosa: function(msg) ( alert("Error!"); ), akiba: uongo, contentType: uongo, processData: uongo )); e.preventDefault();));

Pakua faili ya msimbo wa chanzo: