{"id":24877,"date":"2021-05-27T14:27:00","date_gmt":"2021-05-27T11:27:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24877"},"modified":"2021-10-17T20:37:36","modified_gmt":"2021-10-17T17:37:36","slug":"ajax-tiedostojen-lataamisen-integrointi-wordpressiin","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/ajax-tiedostojen-lataamisen-integrointi-wordpressiin\/","title":{"rendered":"Ajax-tiedostojen lataamisen integrointi WordPressiin"},"content":{"rendered":"<p>Haluatko toteuttaa Ajax-tiedostojen lataamisen WordPressiss\u00e4? Joskus sinun on suoritettava teht\u00e4v\u00e4, joka l\u00e4hett\u00e4\u00e4 tiedoston Ajaxin kautta. T\u00e4ss\u00e4 artikkelissa tutkitaan, miten Ajax-tiedosto ladataan WordPressiss\u00e4.<\/p>\n<p>Etuna tiedostojen lataamisesta Ajaxin kautta on, ett\u00e4 se v\u00e4hent\u00e4\u00e4 palvelimesi kuormitusta. Sivusi ei lataudu uudelleen, mik\u00e4 s\u00e4\u00e4st\u00e4\u00e4 ylim\u00e4\u00e4r\u00e4isi\u00e4 puheluja palvelimelle ja siten kaistanleveyden. Se lis\u00e4\u00e4 my\u00f6s paremman k\u00e4ytt\u00f6kokemuksen verkkosivustollasi.<\/p>\n<p>Normaalisti ty\u00f6skennelless\u00e4mme Ajaxin kanssa soitamme URL-osoitteeseen ja v\u00e4lit\u00e4mme tietoja m\u00e4\u00e4ritettyyn URL-osoitteeseen tai haemme tietoja siit\u00e4. WordPressill\u00e4 on hieman erilainen tapa suorittaa Ajax-operaatioita. WordPressiss\u00e4 soitamme URL-osoitteelle, mutta koodi, jonka kirjoitamme tietojen k\u00e4sittelemiseksi, menee toimintoon. T\u00e4m\u00e4n j\u00e4lkeen t\u00e4m\u00e4n toiminnon on kartoitettava Ajax-parametreissa v\u00e4litetyll\u00e4 &#8217;toiminta&#8217; -arvolla. H\u00e4mmentynyt? Katsotaanpa se toiminnassa.<\/p>\n<h3>Ajax-tiedoston lataus WordPressiss\u00e4<\/h3>\n<p>Aloittamiseen tarvitaan lomake, jossa on sy\u00f6tetty tiedosto. Annamme Ajax-puhelun tiedoston valinnasta ja l\u00e4het\u00e4mme tiedoston palvelimelle. Luo lomake lis\u00e4\u00e4m\u00e4ll\u00e4 alla oleva HTML-koodi sivumalliin.<\/p>\n<pre><code>&lt;form class=\"fileUpload\" enctype=\"multipart\/form-data\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;div class=\"form-group\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;label&gt;&lt;?php _e('Choose File:'); ?&gt;&lt;\/label&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"file\" id=\"file\" accept=\"image\/*\" \/&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n&lt;\/form&gt;<\/code><\/pre>\n<p>Seuraavaksi sinun on annettava Ajax-kutsu tiedoston sy\u00f6tteen muutostapahtumalle. Kun v\u00e4lit\u00e4mme tiedostosis\u00e4lt\u00f6\u00e4 Ajaxille, koodisi on hieman erilainen kuin tavallinen <a href=\"https:\/\/codex.wordpress.org\/AJAX_in_Plugins\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress Ajaxin<\/a> jQuery-koodi .<\/p>\n<h4>Sis\u00e4llyt\u00e4 JS-tiedosto WordPressiin<\/h4>\n<p>Sis\u00e4llytet\u00e4\u00e4n ensin JS-tiedosto WordPress-ymp\u00e4rist\u00f6\u00f6n. T\u00e4m\u00e4 koodi menee <code>functions.php<\/code>tiedostoon tai sivustokohtaiseen laajennukseen.<\/p>\n<pre><code>function aw_scripts() {\n\u00a0\u00a0\u00a0\u00a0\/\/ Register the script\n\u00a0\u00a0\u00a0\u00a0wp_register_script( 'aw-custom', get_stylesheet_directory_uri(). '\/js\/custom.js', array('jquery'), '1.1', true );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Localize the script with new data\n\u00a0\u00a0\u00a0\u00a0$script_data_array = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'ajaxurl' =&gt; admin_url( 'admin-ajax.php' ),\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0wp_localize_script( 'aw-custom', 'aw', $script_data_array );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Enqueued script with localized data.\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script( 'aw-custom' );\n}\n\u00a0\nadd_action( 'wp_enqueue_scripts', 'aw_scripts' );<\/code><\/pre>\n<h4>L\u00e4het\u00e4 tiedosto palvelimelle<\/h4>\n<p>Olet valmis lomakkeen ja JS-tiedoston kanssa. Lis\u00e4\u00e4 nyt alla oleva koodi JS-tiedostoon, joka l\u00e4hett\u00e4\u00e4 tiedostosis\u00e4ll\u00f6n palvelinpuolelle Ajaxin kautta.<\/p>\n<p><strong>custom.js<\/strong><\/p>\n<pre><code>jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0$('body').on('change', '#file', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this = $(this);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0file_data = $(this).prop('files')[0];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data = new FormData();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('file', file_data);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('action', 'file_upload');\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.ajax({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: aw.ajaxurl,\n\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\u00a0contentType: false,\n\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\u00a0data: form_data,\n\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$this.val('');\n\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}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\u00a0\u00a0\u00a0 \n});<\/code><\/pre>\n<p>T\u00e4rke\u00e4 osa yll\u00e4 olevaa koodia on, ett\u00e4 liit\u00e4mme toiminnon &#8217;tiedosto_lataus&#8217; muotoon_tiedot -objektiin. K\u00e4yt\u00e4mme t\u00e4t\u00e4 tiedostotiedosto-toimintoa jatkaaksemme lomaketietoja.<\/p>\n<p>Vuonna <code>functions.php<\/code>, kartta t\u00e4m\u00e4n toiminnan kanssa Ajax seuraavasti:<\/p>\n<pre><code>add_action( 'wp_ajax_file_upload', 'file_upload_callback' );\nadd_action( 'wp_ajax_nopriv_file_upload', 'file_upload_callback' );<\/code><\/pre>\n<p>Jos kirjoitat t\u00e4t\u00e4 koodia laajennuksessa, sinun ei tarvitse kirjoittaa toista lausetta. T\u00e4ss\u00e4 &#8217;wp ajax_&#8217; ja &#8217;wp_ajax_nopriv &#8217; lis\u00e4t\u00e4\u00e4n toimintoarvo, joka on &#8217;file_upload&#8217;. Toinen parametri &#8217;file_upload_callback&#8217; on soittomenetelm\u00e4, jolla on todellinen koodi tiedostojen lataamista varten.<\/p>\n<pre><code>function file_upload_callback() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$arr_img_ext = array('image\/png', 'image\/jpeg', 'image\/jpg', 'image\/gif');\n\u00a0\u00a0\u00a0\u00a0if (in_array($_FILES['file']['type'], $arr_img_ext)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$upload = wp_upload_bits($_FILES[\"file\"][\"name\"], null, file_get_contents($_FILES[\"file\"][\"tmp_name\"]));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/$upload['url'] will gives you uploaded file path\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0wp_die();\n}<\/code><\/pre>\n<p>K\u00e4yt\u00e4n <a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/wp_upload_bits\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wp_upload_bits-<\/a> menetelm\u00e4\u00e4 tiedoston lataamiseen palvelimelle. T\u00e4m\u00e4 menetelm\u00e4 tallentaa tiedoston suoraan wp-content \/ uploads-hakemistoon.<\/p>\n<p>Mene eteenp\u00e4in ja yrit\u00e4 ladata tiedosto. Tiedostosi tulisi ladata wp-content \/ uploads \/ kansioon. Huomaa, ett\u00e4 l\u00f6yd\u00e4t tiedostosi kuluvan kuukauden lataushakemistoon.<\/p>\n<h3>Lataa useita tiedostoja Ajaxin avulla WordPressiss\u00e4<\/h3>\n<p>Toistaiseksi olemme keskustelleet yhden tiedoston lataamisesta Ajaxin kautta. Saattaa olla tilanne, kun haluat ladata useita tiedostoja Ajaxilla. Katsotaanpa, miten se saavutetaan.<\/p>\n<p>Jos haluat ladata useita tiedostoja, sinun on teht\u00e4v\u00e4 pieni\u00e4 muutoksia yll\u00e4 olevaan HTML-, JS- ja PHP-koodiin.<\/p>\n<p>HTML tarjoaa &#8217;useita&#8217; -attribuutin, jonka avulla k\u00e4ytt\u00e4j\u00e4 voi valita useita tiedostoja sy\u00f6tetyst\u00e4 tiedostosta.<\/p>\n<p><strong>HTML-koodi<\/strong><\/p>\n<pre><code>&lt;form class=\"fileUpload\" enctype=\"multipart\/form-data\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;div class=\"form-group\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;label&gt;&lt;?php _e('Choose File:'); ?&gt;&lt;\/label&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;input type=\"file\" id=\"file\" accept=\"image\/*\" multiple \/&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n&lt;\/form&gt;<\/code><\/pre>\n<p>K\u00e4ytt\u00e4j\u00e4n\u00e4, joka aikoo valita useita tiedostoja, meid\u00e4n on vaihdettava JavaScript-koodi, joka silmukkaa jokaista tiedostoa ja rakentaa siit\u00e4 taulukon.<\/p>\n<p><strong>custom.js<\/strong><\/p>\n<pre><code>jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0$('body').on('change', '#file', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this = $(this);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0file_obj = $this.prop('files');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data = new FormData();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for(i=0; i&lt;file_obj.length; i++) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('file[]', file_obj[i]);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('action', 'file_upload');\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.ajax({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: aw.ajaxurl,\n\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\u00a0contentType: false,\n\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\u00a0data: form_data,\n\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$this.val('');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert('File(s) uploaded successfully.');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\n});<\/code><\/pre>\n<p>Ja lopuksi Ajax-soittopyynn\u00f6ss\u00e4 k\u00e4ymme l\u00e4pi tiedostoryhm\u00e4n ja l\u00e4het\u00e4mme jokaisen tiedoston palvelimelle.<\/p>\n<pre><code>function file_upload_callback() {\n\u00a0\u00a0\u00a0\u00a0$arr_img_ext = array('image\/png', 'image\/jpeg', 'image\/jpg', 'image\/gif');\n\u00a0\n\u00a0\u00a0\u00a0\u00a0for($i = 0; $i &lt; count($_FILES['file']['name']); $i++) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (in_array($_FILES['file']['type'][$i], $arr_img_ext)) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$upload = wp_upload_bits($_FILES['file']['name'][$i], null, file_get_contents($_FILES['file']['tmp_name'][$i]));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/$upload['url'] will gives you uploaded file path\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0wp_die();\n}<\/code><\/pre>\n<p>Toivon, ett\u00e4 sait tiet\u00e4\u00e4 Ajax-tiedostojen lataamisesta WordPressiss\u00e4. Haluaisin kuulla ajatuksesi ja ehdotuksesi 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-ajaxia-wordpressissa\/\" title=\"Kuinka k\u00e4ytt\u00e4\u00e4 jQuery Ajaxia WordPressiss\u00e4\">Kuinka k\u00e4ytt\u00e4\u00e4 jQuery Ajaxia WordPressiss\u00e4<\/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>Haluatko integroida Ajax-tiedostojen lataamisen WordPressiin? T\u00e4ss\u00e4 artikkelissa otan esimerkin ja selit\u00e4n, kuinka tiedosto ladataan Ajaxin avulla<\/p>\n","protected":false},"author":1,"featured_media":21665,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[610],"tags":[843],"class_list":["post-24877","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized-6","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/24877","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=24877"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/24877\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/21665"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=24877"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=24877"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=24877"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}