{"id":24614,"date":"2021-05-22T13:45:00","date_gmt":"2021-05-22T10:45:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24614"},"modified":"2021-10-17T20:45:03","modified_gmt":"2021-10-17T17:45:03","slug":"ajax-tiedostojen-lataus-php-lla-ja-jquerylla","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/ajax-tiedostojen-lataus-php-lla-ja-jquerylla\/","title":{"rendered":"Ajax-tiedostojen lataus PHP: ll\u00e4 ja jQueryll\u00e4"},"content":{"rendered":"<p>Etsitk\u00f6 tiedostojen lataamista k\u00e4ytt\u00e4m\u00e4ll\u00e4 Ajaxia PHP: ss\u00e4? Tiedoston lataaminen Ajaxin kautta on nyky\u00e4\u00e4n trendi. Se lis\u00e4\u00e4 paremman k\u00e4ytt\u00f6kokemuksen verkkosivustolla. T\u00e4ss\u00e4 artikkelissa n\u00e4yt\u00e4n, kuinka tiedostoja ladataan Ajaxin kautta PHP: n ja jQueryn avulla.<\/p>\n<p>Tiedostojen \/ kuvien lataaminen on s\u00e4\u00e4nn\u00f6llinen teht\u00e4v\u00e4 kehitt\u00e4jille. On useita tapauksia, joissa sinun on rakennettava tiedostojen lataustoiminto. Joitakin yleisi\u00e4 esimerkkej\u00e4 ovat profiilikuvien, liukus\u00e4\u00e4timien kuvien, suositusten, salkkujen, karusellien jne. Lataaminen.<\/p>\n<h3>Miksi tiedosto on ladattava Ajaxilla?<\/h3>\n<p>T\u00e4rkein syy tiedostojen lataamiseen Ajaxin kautta on, ett\u00e4 et halua p\u00e4ivitt\u00e4\u00e4 sivua tiedostojen lataamisen j\u00e4lkeen. Ja se on ilmeist\u00e4. Koko sivun lataaminen ei ole j\u00e4rkev\u00e4\u00e4, jos se ei ole tarpeen. Jos lataat sivua tiedostojen lataamisen j\u00e4lkeen, lis\u00e4\u00e4t ylim\u00e4\u00e4r\u00e4ist\u00e4 kuormaa palvelimelle.<\/p>\n<p>Tiedostojen lataaminen Ajaxilla v\u00e4hent\u00e4\u00e4 palvelimen tarpeetonta kuormitusta ja antaa paremman k\u00e4ytt\u00f6kokemuksen verkkosivustolla.<\/p>\n<p>Joten aloitamme koodista ilman viivytyksi\u00e4.<\/p>\n<h3>Tiedostojen lataus Ajaxilla PHP: n ja jQueryn avulla<\/h3>\n<p>Aloitetaan luomalla lomake, jossa on tiedostosy\u00f6tt\u00f6 ja L\u00e4het\u00e4-painike. Lis\u00e4\u00e4 alla oleva HTML-koodi tiedostoosi sano <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>Kun aion kirjoittaa v\u00e4h\u00e4n JavaScript-koodia, lis\u00e4sin luokan &#8217;tiedosto&#8217; ja &#8217;l\u00e4het\u00e4&#8217; vastaavaan tiedostopainikkeeseen. N\u00e4m\u00e4 luokat toimivat tunnisteina lomake-elementeille.<\/p>\n<h4>JavaScript-koodi<\/h4>\n<p>Kirjoita seuraavaksi JavaScript-koodi, joka antaa Ajax-puhelun palvelinpuolelle ja k\u00e4sittelee vastauksen.<\/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>Yll\u00e4 olevassa JavaScript-koodissa l\u00e4het\u00e4n tiedostosis\u00e4lt\u00f6\u00e4 <code>ajax.php<\/code>tiedostoon ja k\u00e4sittelen vastausta.<\/p>\n<h4>PHP-koodi<\/h4>\n<p>T\u00e4ss\u00e4 vaiheessa tiedostojen sis\u00e4lt\u00f6 l\u00e4hetet\u00e4\u00e4n palvelinpuolelle. Luo nyt tiedosto, <code>ajax.php<\/code>johon meid\u00e4n on kirjoitettava PHP-koodi, joka lataa tiedostot palvelimelle.<\/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>Yll\u00e4 oleva PHP-koodi tarkistaa ensin &#8217;uploads&#8217; -hakemiston. Jos t\u00e4t\u00e4 hakemistoa ei ole, se luo sen ja l\u00e4hett\u00e4\u00e4 tiedoston t\u00e4h\u00e4n kansioon.<\/p>\n<p>Toivon, ett\u00e4 voit nyt helposti toteuttaa tiedostojen lataamisen verkkosivustollasi Ajaxin avulla. Haluaisin kuulla ajatuksesi alla olevassa kommenttiosassa.<\/p>\n<h4>Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/kuinka-ladata-wordpress-viesteja-ajax-lla\/\" title=\"Kuinka ladata WordPress Post AJAX: lla\" >Kuinka ladata WordPress Post AJAX: lla<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/kuinka-kayttaa-jquery-automaattista-taydennysta-ajaxin-kanssa\/\" title=\"Kuinka k\u00e4ytt\u00e4\u00e4 jQuery-automaattista t\u00e4ydennyst\u00e4 Ajaxin kanssa\" >Kuinka k\u00e4ytt\u00e4\u00e4 jQuery-automaattista t\u00e4ydennyst\u00e4 Ajaxin kanssa<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/fi\/veda-ja-pudota-tiedostolataus-kayttamalla-javascriptia-ja-php-ta\/\" title=\"Ved\u00e4 ja pudota tiedostolataus k\u00e4ytt\u00e4m\u00e4ll\u00e4 JavaScripti\u00e4 ja PHP: t\u00e4\" >Ved\u00e4 ja pudota tiedostolataus k\u00e4ytt\u00e4m\u00e4ll\u00e4 JavaScripti\u00e4 ja PHP: t\u00e4<\/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>Ajax-tiedostojen lataaminen on yleinen teht\u00e4v\u00e4 verkkosivustolle. T\u00e4ss\u00e4 oppaassa n\u00e4yt\u00e4mme kuinka Ajax-tiedostojen latausteht\u00e4v\u00e4 suoritetaan. Se on eritt\u00e4in helppo toteuttaa.<\/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":[275],"tags":[843],"class_list":["post-24614","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php-6","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/24614","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/comments?post=24614"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/24614\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/22140"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=24614"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=24614"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=24614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}