Siku hizi, tovuti zinazidi kuingiliana. Hii inatumika si tu huduma maalum, lakini pia mtandao wa kawaida maduka, blogu na tovuti ndogo ndogo. Sifa kuu ni JavaScript isiyosawazisha na XML imefupishwa kama AJAX. Teknolojia hii inaruhusu kivinjari usuli wasiliana na seva ya wavuti na wakati wa kusasisha data, ukurasa wa wavuti haupakii tena kabisa. Kwa maneno mengine, tunaweza kufanya maombi na kupokea majibu kutoka kwa seva bila kupakia upya ukurasa kwenye kivinjari.
Tangu wengi lugha maarufu kuendeleza programu za wavuti ni PHP, basi leo tutatumia mchanganyiko wa AJAX na PHP. Mfano huo utakuwa mzuri kwa kuelewa kanuni za msingi za kufanya kazi na AJAX na PHP.
Kwa kweli, haipaswi kuwa na ugumu wowote maalum, algorithm ya vitendo ni:
- Chagua picha
- Bonyeza kitufe cha "Tuma".
- Katisha simu ya fomu na kwa kutumia JavaScript(jQuery)
- Tuma maudhui kwa php maalum kidhibiti cha hati
- Rudisha matokeo ya utekelezaji
- Sindika matokeo kwa kutumia JavaScript (jQuery)
- Onyesha habari ya upakuaji kwa mtumiaji
Nitapotoka kidogo kutoka kwa mada na kuelezea jQuery ni nini. jQuery ni maktaba maalum ya JavaScript ambayo husaidia kurahisisha ukuzaji wa programu za wavuti mara kadhaa, pia maktaba hii hutoa API ya kufanya kazi na AJAX. Kwa maneno rahisi, tutaandika nambari ndogo kuliko ikiwa tuliifanya kwa JS safi.
Ajax hukuruhusu kubadilishana data na seva ya wavuti na kusasisha yaliyomo bila kupakia upya ukurasa wa wavuti.
Nina mwelekeo wa kufikiri kwamba ikiwa kuna chombo kinachokuwezesha kuharakisha maendeleo bila matokeo, basi kwa nini usiitumie? Lakini haingeumiza kujua JS safi pia (ingawa kiwango changu cha kibinafsi cha ustadi wa JS ni sawa na kiwango cha mifano ya kunakili-kubandika kutoka kwa stackoverflow :)).
Tutaangalia mojawapo ya matatizo ambayo nililazimika kutatua hapo awali, yaani, kupakia picha kwenye tovuti yenye hakikisho. Ikiwa umebadilisha avatar yako kwenye VKontakte, unaelewa ninachoandika.
Tunahitaji 3 faili rahisi, hii:
- Ukurasa wa fomu
- kidhibiti cha php
- js faili
![](/uploads/" alt=)
Faili ya picha: Mara kwa mara ukurasa wa html na fomu. Zingatia enctype="multipart/form-data" , hii inahitajika ili kuhamisha faili; kigezo kinaonyesha njia ya usimbaji data. Ikiwa unahamisha faili, thamani inapaswa kuwa multipart/form-data .
handler.php // Angalia ikiwa safu ya faili na safu iliyo na data iliyohamishwa imesakinishwa ikiwa(isset($_FILES) && isset($_FILES["image"])) ( //Hifadhi safu iliyohamishwa katika tofauti $ image = $_FILES["picha "]; // Angalia saizi ya faili na ikiwa inazidi kupewa ukubwa// kamilisha utekelezaji wa hati na uonyeshe kosa ikiwa ($image["size"] > 200000) ( die("error"); ) // Pata umbizo la picha $imageFormat = explode(".", $image["name "]); $imageFormat = $imageFormat; // Tengeneza jina jipya la picha. Unaweza kuhifadhi na ya zamani // lakini hii haipendekezwi $imageFullName = "./images/" . hash("crc32",time()) . "." . Umbizo la $; // Hifadhi aina ya picha kwenye kigezo cha $imageType = $image["aina"]; // Angalia miundo inayopatikana picha kama picha mechi, // nakili picha hiyo kwenye folda ya picha ikiwa ($imageType == "image/jpeg" || $imageType == "image/png") (ikiwa (move_uploaded_file($image["tmp_name"],$imageFullName)) ( echo "mafanikio"; ) mwingine ( echo "kosa"; ) ))Hiki ni kidhibiti kilichorahisishwa sana. Nilitengeneza jina la picha kwa kutumia kazi ya hashi. Ni mazoezi mazuri kubadili majina ya faili wakati wa kuyapakia kwenye seva.
ajaxupload.js $(document).ready(kazi () ( chaguo la kukokotoa somaImage (ingizo) ( ikiwa (input.files && input.files) ( var reader = new FileReader(); reader.onload = kazi (e) ( $( "#preview" msg == "mafanikio") ( $(lengwa).addClass("alert alert-success").text("Faili imepakiwa kwa mafanikio."); ) ikiwa (msg == "kosa") ( $(lengwa).addClass ("alert alert-danger").text("Hitilafu ilitokea wakati wa kupakia faili."); ) ) $("#image").change(function())( readImage(hii); )); $( "#pakia -image").on("wasilisha",(kazi(e) ( e.preventDefault(); var formData = new FormData(hii); $.ajax(( type:"POST", // Aina ya ombi url: " handler.php", // Data ya hati ya Handler: formData, // Data tunayopitisha akiba: si kweli, // Katika maombi ya POST imezimwa kwa chaguo-msingi, lakini wacha tuicheze salama ya yaliyomoAina: uongo, // Tunaweka aina ya usimbaji data katika fomu, tutazima mchakato huuData: uongo, // Zima kwa sababu tunapitisha faili success:function(data)( printMessage("#result", data); ), kosa:function(data)( console.log(data); ) )); ))); ));Jambo la kufurahisha zaidi hufanyika katika hati hii. Kutumia kazi ya readImage() tutasoma faili kutoka kwa uga wa fomu na kuipitisha kwa block hakikisho. Kitu cha FileReader kinaundwa. Inaruhusu programu ya wavuti kusoma yaliyomo kwenye faili kwenye kompyuta ya mtumiaji. Tukio la .kupakua litawaka wakati maudhui yanasomwa, kwa kutumia tukio hili tutaonyesha picha kwenye sehemu ya onyesho la kukagua.
Na hatimaye, mbinu ya .readAsDataURL() huanza mchakato wa kusoma faili, baada ya kukamilisha kusoma tukio la .onload litatekelezwa na picha itaonekana kwenye skrini yako.
Kitendaji cha printMessage kimeundwa ili kuonyesha taarifa kuhusu jaribio lililofaulu au lisilofanikiwa la kupakua faili. Hatuitangalii kwa undani; haiwakilishi chochote maalum.
Kukatwa kwa fomu na usindikaji wake. Unapobofya kitufe cha "Wasilisha", tukio litazuiwa na hati na kwa kutumia chaguo la kukokotoa la .preventDefault(), fomu haitatuma data kwa index.html . .preventDefault() inatumika kuzuia matukio yoyote yasitokee.
Tunahitaji kipengee cha FormData kuunda POST ombi kwa hati yetu, ni rahisi zaidi kuliko kuingiza kila kipengee cha fomu kwenye mstari. Tuliunda kitu, tukaijaza na data, na kuituma kwa ajax yetu.
Kweli, ombi la AJAX lenyewe. Kwa kuwa tunatumia maktaba ya jQuery, kuunda na kutekeleza swali kama hilo hakutasababisha matatizo yoyote.
Kweli, tumalizie hapa. Picha hupakia, ukurasa haupakia tena, kila mtu anafurahi. Ikiwa una maswali au mapendekezo, andika maoni.
Kuwa na siku njema na bahati nzuri :)
Tumepitia mbinu kadhaa za kimsingi za kurejesha data na kuipitisha kwa ombi la AJAX. Sasa ni wakati wa kuzungumza juu ya jinsi unaweza kupakia faili kwa kutumia AJAX. Hadi hivi majuzi, hakukuwa na njia nyingi za kupakua faili bila kupakia upya ukurasa yenyewe (iframe iliyofichwa, Flash). Bado zinatumika leo kwa sababu bado kuna watumiaji walio na matoleo ya zamani ya vivinjari ambao hawajaathiriwa na maendeleo. Lakini hatutaangalia nyuma, kwa hivyo tunaendelea na wakati.
Hebu fikiria, kwa maoni yangu, mojawapo ya wengi njia rahisi kwa kufanya kazi na faili (na sio tu) - kitu cha FormData. Wacha kuwe na fomu rahisi ya kupakia avatar ya mtumiaji:
HTML ( index.html faili)
JINA KAMILI:
Ishara:
Wacha tuendelee kwenye sehemu ya JS. Hakutakuwa na matatizo na sehemu ya "Jina Kamili" na tunaitumia tu ili kuonyesha kwamba pamoja na faili, tunaweza kutuma data nyingine yoyote.
jQuery( script.js faili)
$(function())( $("#my_form").on("submit", function(e)( e.preventDefault(); var $that = $(hii), formData = new FormData($that.get ( 0)); // unda mfano mpya wa kitu na uipitishe fomu yetu (*) $.ajax(( url: $that.attr("action"), aina: $that.attr("njia") , contentType: false , // muhimu - ondoa mchakato wa uumbizaji wa data chaguo-msingiData: uongo, // muhimu - ondoa data ya ubadilishaji wa kamba chaguo-msingi: formData, dataType: "json", success: function(json)( if(json)( $ that.replaceWith( json); ) ));));));
(*)Tafadhali kumbuka kuwa hatuwasilishi fomu kitu cha jQuery, na kipengele cha DOM
Kidhibiti cha PHP ( faili handler.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:
Kupakia faili au picha kwa seva ni kazi ya kawaida kabisa. Lakini maendeleo hayasimama, na kwa hivyo sasa, bila shaka, nataka faili zipakuliwe nyuma. Kama sheria, hapo awali hii inaweza kutekelezwa kwa kutumia teknolojia ya flash au iframe. Pia, watu wengi hutumia programu-jalizi kama vile jQuery Form Plugin au Ajax File Upload Plugin au Multiple File Upload Plugin na bahari ya wengine. Pamoja na ujio wa kitu cha FormData, kila kitu kimekuwa rahisi zaidi. FormData() hukuruhusu kutunga seti ya data ya kutuma kwa seva kwa kutumia XMLHttpRequest.
Wacha tujaribu kuandika msimbo wetu wenyewe bila programu-jalizi yoyote (vizuri, isipokuwa kwa mfumo wa jQuery, bila shaka) kupakia picha au faili kwenye seva nyuma. Kwa ujumla, algorithm ya vitendo vyetu itakuwa kitu kama hiki: jaza sehemu za fomu na data. Sehemu zinaweza kuwa chochote, maandishi, eneo la maandishi, chagua na faili. Unapochagua faili, kwa shukrani kwa msimbo wetu wa jQuery, faili hizi zitapakuliwa kwa nyuma kwenye saraka ya muda kwenye seva, kwa mfano "tmp". Ifuatayo, unapobonyeza kitufe kuwasilisha fomu, data hutumwa kwa hati ya seva ambayo itachakata data. Hebu fikiria kwamba haya ni makala. Tutarekodi data iliyotumwa katika hifadhidata yenye kitambulisho cha kipekee. Ifuatayo, tutaunda saraka kwenye saraka ya "picha" na nambari ya kipekee "id" na ikiwa tulikuwa na faili kwenye folda ya "tmp", tutazinakili kwenye folda ya "id" iliyoundwa na kisha kufuta "tmp". ” folda. Kwa muhtasari: tunajaza picha kwenye tmp kama msingi, wakati wa kuwasilisha fomu tunaandika data kwenye hifadhidata, tutakuwa na nambari ya kipekee kumbukumbu. Tunaunda folda na nambari hii na kuhamisha faili zetu huko. Wote. Katika makala hii, hatutazingatia kupakia kwenye hifadhidata na kunakili faili. Nadhani kutakuwa na kitu kwa kila mtu hapa. Tutazingatia jambo moja - upakiaji wa asynchronous picha (au faili).
Kwa hivyo hapa kuna kipande chetu cha html. Hapa tutazingatia ukweli kwamba tuna faili ya GIF na picha ya preloader (mduara looped), ambayo sisi kujificha kutoka kuonyesha na mitindo. Pia tutaweka id = faili kwenye uwanja wa faili, na enctype = "multipart/form-data" kwenye fomu. Jina la uga wa faili litakuwa faili i.e. ili tuweze kufanya kazi na safu, kwa kuwa tunaruhusiwa kupakia faili nyingi (sifa nyingi).
#kipakiaji awali (mwonekano: siri;) Ongeza maelezo 
Katika fomu hii, pamoja na uwanja wa faili, tunayo sehemu kadhaa kwa mfano: input=text. Wale. mbele yetu fomu ya kawaida kwa mfano, kwa paneli ya msimamizi, ambayo ni seti ya sehemu unazohitaji. Kuanza, ikiwa unataka, unaweza kuangalia utendakazi wa hati kwa kuandika mistari inayoonyesha safu ya FILES mwanzoni mwa faili:
//upload.php print_r($_FILES);
Sasa hebu tuandike hati yetu ya seva, ambayo itaitwa kutoka kutumia jQuery. Kazi yake ni kuhamisha faili zilizopakiwa kutoka kwa saraka ya muda ya seva hadi yetu, kwa mfano, kama tulivyoamua katika "tmp", na kisha kuwaonyesha.
//upload.php kitendakazi show_dir($dir) // kitendakazi cha kuonyesha picha kutoka kwa folda ya tmp ( $list = scandir($dir); haijawekwa($list,$list); foreach ($list as $file) ( echo " "; ) ) foreach ($_FILES as $key => $value) ( //hamisha faili hadi tmp move_uploaded_file($value["tmp_name"], "tmp/".$value["name"]);) show_dir( "./tmp/");
Na sasa hati yetu ya js, ambayo itapakia faili zetu kwa seva nyuma. Uchawi wote utafanywa kwa shukrani kwa kitu cha FormData(). Tutaongeza msimbo huu hadi mwisho wa index.php yetu kabla ya lebo.
$(document).ready(function())( $("#preloader").hide(); $("#file").bind("change", function())( var data = new FormData() ; var error = ""; jQuery.each($("#faili").faili, kazi(i, faili) ( if(file.name.length< 1) { error = error + " Файл имеет неправильный размер! "; } //Проверка на длину имени if(file.size >1000000) ( kosa = kosa + " Faili " + file.name + " ni kubwa."; ) //Kuangalia ukubwa wa faili if(file.type != "image/png" && file.type != "image/jpg " " && !file.type != "image/gif" && file.type != "picha/jpeg") ( error = error + "Faili " + file.name + " hailingani na png, jpg au gif" ; ) / /Kuangalia aina za faili data.append("faili-"+i, faili); )); ikiwa (hitilafu != "") ($("#info").html(kosa);) vinginevyo ( $.ajax(( url: "upload.php", data: data, cache: false, contentType: uongo, processData: uongo, chapa: "POST", kabla yaTuma: function() ( $("#preloader").show(); ), mafanikio: function(data)( $("#info").html(data); $("#preloader").hide(); ) )); ) ))));
Naam, hiyo inaonekana kuwa yote. Ikiwa kuna mtu haelewi kitu, muulize. Ikiwa kuna mtu ana nyongeza yoyote, nitafurahi pia!
Kidokezo: ikiwa bado haujatumia msimbo kufuta faili kutoka kwa saraka yoyote, basi ninapendekeza kubadilisha kazi ya kufuta rmdir ili echo kwa ajili ya mtihani ili kuhakikisha kuwa faili hizo tu ambazo unataka kufuta zitafutwa. Vipakiaji vya awali vya Gif vinaweza kuchukuliwa, kwa mfano, kutoka kwa somo langu Jinsi ya kutengeneza uhuishaji wa Gif. Mifano mwishoni mwa makala.
Ikiwa mtu yeyote anataka kuongeza uzuri, kwa mfano bar ya maendeleo, basi kwa hili tutahitaji kuongeza mistari michache ya kanuni. KATIKA kiolezo cha html tutaongeza kipengele bora kutoka kwa html5 - maendeleo, na katika msimbo wa js tutaongeza mistari kadhaa na kitu cha XMLHttpRequest.
Na kwa hivyo, html yetu itaongezewa na yafuatayo:
Na tutaongeza kwa nambari ya js:
Maendeleo ya kaziHandlingFunction(e)( if(e.lengthComputable)( $("progress").attr((thamani:e.loaded,max:e.total)); ) )
Xhr: function() ( var myXhr = $.ajaxSettings.xhr(); ikiwa(myXhr.upload)( // kuangalia kuwa upakiaji huo unatekelezwa myXhr.upload.addEventListener("progress",progressHandlingFunction, uongo); // kupita kwa maadili ya kazi) rudisha myXhr;)
Matokeo ya mwisho ya nambari ya js:
$(document).ready(function())( kazi progressHandlingFunction(e)( if(e.lengthComputable)( $("progress").attr((thamani:e.loaded,max:e.total)); ) ) $("#preloader").hide(); $("#faili").bind("change", function())( var data = new FormData(); var error = ""; jQuery.each( $( "#faili").faili, kazi(i, faili) ( if(file.name.length< 1) { error = error + " Файл имеет неправильный размер! "; } if(file.size >1000000) ( error = error + " File " + file.name + " is to big."; ) if(file.type != "image/png" && file.type != "image/jpg" && !faili. type != "image/gif" && file.type != "image/jpeg") ( error = error + "Faili " + file.name + " hailingani na png, jpg au gif"; ) data.append( "faili -"+i, faili); )); ikiwa (kosa != "") ($("#info").html(kosa);) vinginevyo ( $.ajax(( url: "productUploadImg.php", aina: "POST", xhr: function() ( var myXhr = $.ajaxSettings.xhr(); ikiwa(myXhr.upload)( // kuangalia kuwa upakiaji unaendelea myXhr.upload.addEventListener("progress",progressHandlingFunction, uongo); //kupita thamani kwenye chaguo la kukokotoa ) return myXhr; ) , data: data, cache: false, contentType: uongo, processData: uongo, beforeSend: function() ( $("#preloader").show(); ), mafanikio: function(data)( $ ("#info" ).html(data); $("#preloader").hide(); ) , hitilafu: errorHandler = function() ( $("#info").html("Hitilafu ya kupakia faili") ;)));)))));
