{"id":24989,"date":"2021-05-22T13:50:00","date_gmt":"2021-05-22T10:50:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24989"},"modified":"2021-10-17T18:56:19","modified_gmt":"2021-10-17T15:56:19","slug":"ajaxi-failide-uleslaadimine-php-ja-jquery-abil","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/et\/ajaxi-failide-uleslaadimine-php-ja-jquery-abil\/","title":{"rendered":"Ajaxi failide \u00fcleslaadimine PHP ja jQuery abil"},"content":{"rendered":"<p>Kas otsite failide \u00fcleslaadimist PHP-s Ajaxi abil? Ajaxi kaudu faili \u00fcleslaadimine on t\u00e4nap\u00e4eval trendikas. See lisab veebisaidil parema kasutuskogemuse. Selles artiklis n\u00e4itan teile, kuidas faile Ajaxi kaudu PHP ja jQuery abil \u00fcles laadida.<\/p>\n<p>Failide \/ piltide \u00fcleslaadimine on arendajatele tavaline \u00fclesanne. On mitmeid juhtumeid, kus peate \u00fcles laadima failide \u00fcleslaadimise funktsionaalsuse. M\u00f5ned levinumad n\u00e4ited on profiilifotode, liuguripiltide, iseloomustuste, portfellide, karussellide jms \u00fcleslaadimine.<\/p>\n<h3>Miks on vaja Ajaxi abil faili \u00fcles laadida?<\/h3>\n<p>Ajaxi kaudu failide \u00fcleslaadimise peamine p\u00f5hjus on see, et te ei soovi lehte p\u00e4rast failide \u00fcleslaadimist v\u00e4rskendada. Ja see on ilmne. Kui pole vajadust, pole m\u00f5tet tervet lehte laadida. Kui laadite lehte p\u00e4rast faili \u00fcleslaadimist, lisate serverisse lisakoormust.<\/p>\n<p>Ajaxi abil failide \u00fcleslaadimine v\u00e4hendab serveri tarbetut koormust ja annab veebisaidil parema kasutuskogemuse.<\/p>\n<p>Nii et alustame pikema viivituseta koodiga.<\/p>\n<h3>Failide \u00fcleslaadimine Ajaxi abil koos PHP ja jQueryga<\/h3>\n<p>Alustuseks loome vormi, millel on failisisestus ja nuppu Esita. Lisage oma faili \u00f6elge j\u00e4rgmine HTML-kood <code>index.php<\/code>.<\/p>\n<pre><code>&lt;form&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;p&gt;&lt;input type=\"file\" name=\"file\" class=\"file\" required&gt;&lt;\/p&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;input type=\"submit\" name=\"submit\" class=\"submit\" value=\"Submit\"&gt;\n&lt;\/form&gt;<\/code><\/pre>\n<p>Kuna kavatsen kirjutada natuke JavaScripti koodi, lisasin vastavalt faili sisestamise ja esitamise nupule klassid &#8216;fail&#8217; ja &#8216;esita&#8217;. Need klassid toimivad vormielementide identifikaatorina.<\/p>\n<h4>JavaScripti kood<\/h4>\n<p>J\u00e4rgmisena kirjutage JavaScripti kood, mis kutsub Ajaxi k\u00f5ne serveripoolele ja haldab vastust.<\/p>\n<pre><code>&lt;script src=\"https:\/\/code.jquery.com\/jquery-3.5.0.js\"&gt;&lt;\/script&gt;\n&lt;script type=\"text\/javascript\"&gt;\n\u00a0\u00a0\u00a0\u00a0$(function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.submit').on('click', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var file_data = $('.file').prop('files')[0];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(file_data != undefined) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var form_data = new FormData();\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('file', file_data);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.ajax({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type: 'POST',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: 'ajax.php',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0contentType: false,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0processData: false,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data: form_data,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0success:function(response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(response == 'success') {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert('File uploaded successfully.');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert('Something went wrong. Please try again.');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.file').val('');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return false;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\n&lt;\/script&gt;<\/code><\/pre>\n<p>\u00dclaltoodud JavaScripti koodis saadan faili sisu <code>ajax.php<\/code>faili ja t\u00f6\u00f6tlen ka vastusega.<\/p>\n<h4>PHP kood<\/h4>\n<p>Selles etapis oleme faili sisu serveripoolele saatnud. N\u00fc\u00fcd looge fail, <code>ajax.php<\/code>kuhu peame kirjutama PHP-koodi, mis laadib failid serverisse \u00fcles.<\/p>\n<p><strong>ajax.php<\/strong><\/p>\n<pre><code>&lt;?php\nif (!file_exists('uploads')) {\n\u00a0\u00a0\u00a0\u00a0mkdir('uploads', 0777);\n}\n\u00a0\u00a0\nmove_uploaded_file($_FILES['file']['tmp_name'], 'uploads\/'. $_FILES['file']['name']);\n\u00a0\u00a0\necho \"success\";\ndie();<\/code><\/pre>\n<p>\u00dclaltoodud PHP-kood kontrollib k\u00f5igepealt kataloogi &#8216;uploads&#8217;. Kui seda kataloogi pole, loob see selle ja laadib faili \u00fcles sellesse kausta.<\/p>\n<p>Loodan, et saate n\u00fc\u00fcd Ajaxi abil failide \u00fcleslaadimise oma veebisaidil h\u00f5lpsasti rakendada. Tahaksin kuulda teie m\u00f5tteid allpool olevast kommentaaride jaotisest.<\/p>\n<h4>seotud artiklid<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/et\/kuidas-laadida-wordpressi-postitusi-ajax-iga\/\" title=\"Kuidas laadida WordPressi postitust AJAX-iga\" >Kuidas laadida WordPressi postitust AJAX-iga<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/et\/jquery-automaatse-taitmise-kasutamine-ajaxiga\/\" title=\"JQuery automaatse t\u00e4itmise kasutamine Ajaxiga\" >JQuery automaatse t\u00e4itmise kasutamine Ajaxiga<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/et\/pukseerige-faili-uleslaadimine-javascripti-ja-php-abil\/\" title=\"Pukseerige faili \u00fcleslaadimine JavaScripti ja PHP abil\" >Pukseerige faili \u00fcleslaadimine JavaScripti ja PHP abil<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ajaxi failide \u00fcleslaadimine on veebisaidi tavaline \u00fclesanne. Selles juhendis n\u00e4itame teile, kuidas Ajaxi faili \u00fcleslaadimise \u00fclesannet t\u00e4ita. Seda on v\u00e4ga lihtne rakendada.<\/p>\n","protected":false},"author":1,"featured_media":22140,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[274],"tags":[842],"class_list":["post-24989","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php-5","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts\/24989","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/comments?post=24989"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/posts\/24989\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/media\/22140"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/media?parent=24989"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/categories?post=24989"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/et\/wp-json\/wp\/v2\/tags?post=24989"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}