{"id":25302,"date":"2021-05-27T15:02:00","date_gmt":"2021-05-27T12:02:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25302"},"modified":"2021-10-17T18:44:03","modified_gmt":"2021-10-17T15:44:03","slug":"ajaxi-faili-uleslaadimise-integreerimine-wordpressi","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/et\/ajaxi-faili-uleslaadimise-integreerimine-wordpressi\/","title":{"rendered":"Ajaxi faili \u00fcleslaadimise integreerimine WordPressi"},"content":{"rendered":"

Kas soovite rakendada AjaP faili \u00fcleslaadimist WordPressis? M\u00f5nikord peate t\u00e4itma toimingu, mis laadib faili \u00fcles Ajaxi kaudu. Selles artiklis uurime, kuidas Ajaxi faile \u00fcles laadida WordPressis.<\/p>\n

Ajaxi kaudu failide \u00fcleslaadimise eelis on see, et see v\u00e4hendab teie serveri koormust. Teie lehte ei laadita uuesti, mis salvestab serverisse lisak\u00f5nesid ja seega ka ribalaiust. Samuti lisab see teie veebisaidil parema kasutuskogemuse.<\/p>\n

Tavaliselt helistame Ajaxiga t\u00f6\u00f6tades URL-ile ja edastame andmeid v\u00f5i hankime andmeid m\u00e4\u00e4ratud URL-ile. WordPressil on Ajaxi toimingute tegemiseks veidi erinev viis. WordPressis helistame URL-ile, kuid andmete t\u00f6\u00f6tlemiseks kirjutatav kood l\u00e4heb funktsiooni. Seej\u00e4rel peab see funktsioon olema kaardistatud Ajaxi parameetrites edastatud ‘action’ v\u00e4\u00e4rtusega. Segaduses? Vaatame seda tegevuses.<\/p>\n

Ajaxi faili \u00fcleslaadimine WordPressis<\/h3>\n

Alustamiseks vajate failisisestusega vormi. Helistame faili valimisel Ajaxi k\u00f5ne ja laadime faili \u00fcles serverisse. Vormi loomiseks lisage allolev HTML oma lehemalli.<\/p>\n

<form class=\"fileUpload\" enctype=\"multipart\/form-data\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label><?php _e('Choose File:'); ?><\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"file\" id=\"file\" accept=\"image\/*\" \/>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/form><\/code><\/pre>\n
J\u00e4rgmisena peate faili sisendi muutmise korral ajaxi k\u00f5ne tegema. Kuna edastame faili sisu Ajaxile, on teie kood WordPress Ajaxi<\/a> tavalise jQuery koodiga v\u00f5rreldes veidi erinev .<\/p>\n
Kaasa JS-fail WordPressi<\/h4>\n
Lisame k\u00f5igepealt JS-faili WordPressi keskkonda. See kood l\u00e4heb functions.php<\/code>faili sisse v\u00f5i saidip\u00f5hisse pistikprogrammi.<\/p>\n
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' => 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
Laadige fail serverisse \u00fcles<\/h4>\n
Olete vormi ja JS-failiga valmis. N\u00fc\u00fcd lisage JS-faili allpool olev kood, mis saadab faili sisu Ajaxi kaudu serveri poolele.<\/p>\n
custom.js<\/strong><\/p>\n
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
\u00dclaltoodud koodi oluline osa on see, et lisame objektile form_data toimingu ‘file_upload’. Vormiandmete j\u00e4tkamiseks kasutame seda toimingut \u201efile_upload".<\/p>\n
Aastal functions.php<\/code>, kaardistada tegevus koos Ajax j\u00e4rgmiselt:<\/p>\n
add_action( 'wp_ajax_file_upload', 'file_upload_callback' );\nadd_action( 'wp_ajax_nopriv_file_upload', 'file_upload_callback' );<\/code><\/pre>\n
Kui kirjutate selle koodi pistikprogrammis, ei pea te teist avaldust kirjutama. Siin lisame ‘wp ajax_’ ja ‘wp_ajax_nopriv ‘ juurde toimingu v\u00e4\u00e4rtuse, mis on ‘file_upload’. Teine parameeter ‘file_upload_callback’ on tagasihelistusmeetod, millel on failide \u00fcleslaadimiseks tegelik kood.<\/p>\n
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
Kasutan faili serverisse \u00fcleslaadimiseks meetodit wp_upload_bits<\/a>. See meetod salvestab faili otse kataloogi wp-content \/ uploads.<\/p>\n
Proovige faili \u00fcles laadida. Teie fail tuleks \u00fcles laadida kausta wp-content \/ uploads \/. Pange t\u00e4hele, et leiate oma faili \u00fcleslaadimiste kataloogi praeguse kuu kausta.<\/p>\n
Laadige mitu faili \u00fcles WordPressi Ajaxi abil<\/h3>\n
Siiani oleme arutanud \u00fche faili \u00fcleslaadimist Ajaxi kaudu. V\u00f5ib tekkida olukord, kui soovite Ajaxi abil mitu faili \u00fcles laadida. Vaatame, kuidas seda saavutada.<\/p>\n
Mitme faili \u00fcleslaadimiseks peate \u00fclaltoodud HTML-, JS- ja PHP-koodis veidi muutma.<\/p>\n
HTML pakub atribuuti ‘mitu’, mis v\u00f5imaldab kasutajal failisisestuses valida mitu faili.<\/p>\n
HTML-kood<\/strong><\/p>\n
<form class=\"fileUpload\" enctype=\"multipart\/form-data\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label><?php _e('Choose File:'); ?><\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"file\" id=\"file\" accept=\"image\/*\" multiple \/>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/form><\/code><\/pre>\n
Kasutajana, kes valib mitu faili, peame muutma JavaScripti koodi, mis viib l\u00e4bi iga faili ja loob sellest massiivi.<\/p>\n
custom.js<\/strong><\/p>\n
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<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
Ja l\u00f5puks, Ajaxi tagasihelistamisfunktsioonis uurime failimassiivi ja laadime iga faili serverisse \u00fcles.<\/p>\n
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 < 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
Loodan, et saite teada AjaPX-i failide \u00fcleslaadimisest WordPressis. Tahaksin kuulda teie m\u00f5tteid ja ettepanekuid allpool olevas kommentaaride jaotises.<\/p>\n
seotud artiklid<\/h4>\n