{"id":28517,"date":"2021-05-27T14:35:00","date_gmt":"2021-05-27T11:35:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28517"},"modified":"2021-10-18T03:41:32","modified_gmt":"2021-10-18T00:41:32","slug":"jak-zintegrowac-przesylanie-plikow-ajax-z-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/jak-zintegrowac-przesylanie-plikow-ajax-z-wordpress\/","title":{"rendered":"Jak zintegrowa\u0107 przesy\u0142anie plik\u00f3w Ajax z WordPress"},"content":{"rendered":"

Czy chcesz zaimplementowa\u0107 przesy\u0142anie plik\u00f3w Ajax w WordPress? Czasami musisz wykona\u0107 zadanie, kt\u00f3re przesy\u0142a plik przez Ajax. W tym artykule dowiemy si\u0119, jak przesy\u0142a\u0107 pliki Ajax w WordPress.<\/p>\n

Zalet\u0105 przesy\u0142ania plik\u00f3w przez Ajax jest zmniejszenie obci\u0105\u017cenia serwera. Twoja strona nie prze\u0142aduje si\u0119, co oszcz\u0119dza dodatkowe po\u0142\u0105czenia z serwerem, a tym samym przepustowo\u015b\u0107. Zapewnia r\u00f3wnie\u017c lepsze wra\u017cenia u\u017cytkownika w Twojej witrynie.<\/p>\n

Zwykle podczas pracy z Ajaxem wywo\u0142ujemy adres URL i przekazujemy dane do lub pobieramy dane z okre\u015blonego adresu URL. WordPress ma nieco inny spos\u00f3b wykonywania operacji Ajax. W WordPressie wywo\u0142ujemy adres URL, ale kod, kt\u00f3ry piszemy, aby przetworzy\u0107 dane, trafi do funkcji. Nast\u0119pnie ta funkcja musi mapowa\u0107 z warto\u015bci\u0105 'action’ przekazan\u0105 w parametrach Ajax. Zmieszany? Zobaczmy to w akcji.<\/p>\n

Przesy\u0142anie plik\u00f3w Ajax w WordPress<\/h3>\n

Aby rozpocz\u0105\u0107, potrzebujesz formularza z danymi wej\u015bciowymi pliku. Wykonujemy wywo\u0142anie Ajax przy wyborze pliku i przesy\u0142amy plik na serwer. Aby utworzy\u0107 formularz, dodaj poni\u017cszy kod HTML do szablonu strony.<\/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
Nast\u0119pnie musisz wywo\u0142a\u0107 Ajax na zdarzeniu zmiany wej\u015bcia pliku. Poniewa\u017c przekazujemy zawarto\u015b\u0107 pliku do Ajax, Tw\u00f3j kod b\u0119dzie nieco inny ni\u017c zwyk\u0142y kod jQuery w WordPress Ajax<\/a>.<\/p>\n
Do\u0142\u0105cz plik JS do WordPress<\/h4>\n
Najpierw do\u0142\u0105czmy plik JS do \u015brodowiska WordPress. Ten kod zostanie umieszczony w functions.php<\/code>pliku lub we wtyczce specyficznej dla witryny.<\/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
Prze\u015blij plik na serwer<\/h4>\n
Jeste\u015b gotowy z formularzem i plikiem JS. Teraz dodaj poni\u017cszy kod w pliku JS, kt\u00f3ry wy\u015ble \u200b\u200bzawarto\u015b\u0107 pliku po stronie serwera przez Ajax.<\/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
Wa\u017cn\u0105 cz\u0119\u015bci\u0105 powy\u017cszego kodu jest dodanie akcji 'file_upload’ do obiektu form_data. U\u017cyjemy tej akcji 'file_upload’, aby kontynuowa\u0107 z danymi formularza.<\/p>\n
W functions.php<\/code>, zmapuj t\u0119 akcj\u0119 z Ajaxem w nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n
add_action( 'wp_ajax_file_upload', 'file_upload_callback' );\nadd_action( 'wp_ajax_nopriv_file_upload', 'file_upload_callback' );<\/code><\/pre>\n
Je\u015bli piszesz ten kod we wtyczce, nie musisz pisa\u0107 drugiej instrukcji. Tutaj do 'wp ajax_’ i 'wp_ajax_nopriv ’ do\u0142\u0105czamy warto\u015b\u0107 akcji, kt\u00f3r\u0105 jest 'file_upload’. Drugi parametr 'file_upload_callback’ to metoda wywo\u0142ania zwrotnego, kt\u00f3ra b\u0119dzie zawiera\u0142a rzeczywisty kod do przesy\u0142ania plik\u00f3w.<\/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
U\u017cywam wp_upload_bits<\/a> metod\u0119 przesy\u0142ania pliku na serwerze. Ta metoda bezpo\u015brednio przechowuje plik w katalogu wp-content\/uploads.<\/p>\n
\u015amia\u0142o i spr\u00f3buj przes\u0142a\u0107 plik. Tw\u00f3j plik powinien zosta\u0107 przes\u0142any do folderu wp-content\/uploads\/. Pami\u0119taj, \u017ce plik znajdzie si\u0119 w folderze bie\u017c\u0105cego miesi\u0105ca w katalogu przesy\u0142ania.<\/p>\n
Prze\u015blij wiele plik\u00f3w za pomoc\u0105 Ajax w WordPress<\/h3>\n
Do tej pory omawiali\u015bmy przesy\u0142anie pojedynczego pliku przez Ajax. Mo\u017ce zaistnie\u0107 sytuacja, gdy chcesz przes\u0142a\u0107 wiele plik\u00f3w za pomoc\u0105 Ajax. Zobaczmy, jak to osi\u0105gn\u0105\u0107.<\/p>\n
Aby przes\u0142a\u0107 wiele plik\u00f3w, musisz wprowadzi\u0107 niewielkie zmiany w powy\u017cszym kodzie HTML, JS i PHP.<\/p>\n
HTML zapewnia atrybut \u201ewiele", kt\u00f3ry pozwala u\u017cytkownikowi wybra\u0107 wiele plik\u00f3w podczas wprowadzania pliku.<\/p>\n
Kod HTML<\/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
Jako u\u017cytkownik zamierzaj\u0105cy wybra\u0107 wiele plik\u00f3w, musimy zmieni\u0107 kod JavaScript, kt\u00f3ry przechodzi przez ka\u017cdy plik i buduje z niego tablic\u0119.<\/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
I na koniec, w funkcji zwrotnej Ajax, przechodzimy przez tablic\u0119 plik\u00f3w i przesy\u0142amy ka\u017cdy plik na serwer.<\/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
Mam nadziej\u0119, \u017ce dowiedzia\u0142e\u015b si\u0119 o przesy\u0142aniu plik\u00f3w Ajax do WordPressa. Chcia\u0142bym us\u0142ysze\u0107 wasze przemy\u015blenia i sugestie w sekcji komentarzy poni\u017cej.<\/p>\n
Powi\u0105zane artyku\u0142y<\/h4>\n