{"id":28210,"date":"2021-05-22T14:14:00","date_gmt":"2021-05-22T11:14:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28210"},"modified":"2021-10-18T03:42:56","modified_gmt":"2021-10-18T00:42:56","slug":"przesylanie-plikow-ajax-za-pomoca-php-i-jquery","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/przesylanie-plikow-ajax-za-pomoca-php-i-jquery\/","title":{"rendered":"Przesy\u0142anie plik\u00f3w Ajax za pomoc\u0105 PHP i jQuery"},"content":{"rendered":"

Szukasz wgrywania plik\u00f3w za pomoc\u0105 Ajax w PHP? Przesy\u0142anie pliku przez Ajax jest obecnie modne. Zapewnia lepsze wra\u017cenia u\u017cytkownika na stronie internetowej. W tym artykule poka\u017c\u0119, jak przesy\u0142a\u0107 pliki przez Ajax z PHP i jQuery.<\/p>\n

Przesy\u0142anie plik\u00f3w\/obraz\u00f3w to regularne zadanie programist\u00f3w. Istnieje kilka przypadk\u00f3w, w kt\u00f3rych musisz zbudowa\u0107 funkcj\u0119 przesy\u0142ania plik\u00f3w. Niekt\u00f3re z typowych przyk\u0142ad\u00f3w to przesy\u0142anie zdj\u0119\u0107 profilowych, obraz\u00f3w suwak\u00f3w, referencji, portfolio, karuzeli itp.<\/p>\n

Dlaczego potrzebne jest przesy\u0142anie plik\u00f3w za pomoc\u0105 Ajax?<\/h3>\n

G\u0142\u00f3wnym powodem wykonywania przesy\u0142ania plik\u00f3w przez Ajax jest to, \u017ce nie chcesz od\u015bwie\u017ca\u0107 strony po przes\u0142aniu pliku. I to jest oczywiste. Nie ma sensu \u0142adowanie ca\u0142ej strony, je\u015bli nie jest to konieczne. Je\u015bli \u0142adujesz stron\u0119 po przes\u0142aniu pliku, dodajesz dodatkowe obci\u0105\u017cenie na serwerze.<\/p>\n

Przesy\u0142anie plik\u00f3w za pomoc\u0105 Ajax zmniejsza niepotrzebne obci\u0105\u017cenie serwera i zapewnia lepsze wra\u017cenia u\u017cytkownika na stronie internetowej.<\/p>\n

Wi\u0119c bez dalszej zw\u0142oki zacznijmy od kodu.<\/p>\n

Przesy\u0142anie plik\u00f3w za pomoc\u0105 Ajax z PHP i jQuery<\/h3>\n

Zacznijmy od utworzenia formularza, kt\u00f3ry zawiera plik wej\u015bciowy i przycisk przesy\u0142ania. Dodaj poni\u017cszy kod HTML do pliku, powiedzmy index.php<\/code>.<\/p>\n

<form>\n\u00a0\u00a0\u00a0\u00a0<p><input type=\"file\" name=\"file\" class=\"file\" required><\/p>\n\u00a0\u00a0\u00a0\u00a0<input type=\"submit\" name=\"submit\" class=\"submit\" value=\"Submit\">\n<\/form><\/code><\/pre>\n
Poniewa\u017c mam zamiar napisa\u0107 troch\u0119 kodu JavaScript, doda\u0142em odpowiednio klas\u0119 \u201efile" i \u201esubmit” do wej\u015bcia pliku i przycisku przesy\u0142ania. Te klasy dzia\u0142aj\u0105 jako identyfikatory dla element\u00f3w formularza.<\/p>\n
Kod JavaScript<\/h4>\n
Nast\u0119pnie napisz troch\u0119 kodu JavaScript, kt\u00f3ry da wywo\u0142anie Ajax po stronie serwera i obs\u0142u\u017cy odpowied\u017a.<\/p>\n
<script src=\"https:\/\/code.jquery.com\/jquery-3.5.0.js\"><\/script>\n<script type=\"text\/javascript\">\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<\/script><\/code><\/pre>\n
W powy\u017cszym kodzie JavaScript wysy\u0142am zawarto\u015b\u0107 pliku do ajax.php<\/code>pliku oraz obs\u0142ug\u0119 odpowiedzi.<\/p>\n
Kod PHP<\/h4>\n
Na tym etapie ko\u0144czymy wysy\u0142anie zawarto\u015bci pliku po stronie serwera. Teraz utw\u00f3rz plik, w ajax.php<\/code>kt\u00f3rym musimy napisa\u0107 kod PHP, kt\u00f3ry przesy\u0142a pliki na serwer.<\/p>\n
ajax.php<\/strong><\/p>\n
<?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
Powy\u017cszy kod PHP najpierw sprawdza katalog 'uploads’. Je\u015bli ten katalog nie istnieje, tworzy go i przesy\u0142a plik do tego folderu.<\/p>\n
Mam nadziej\u0119, \u017ce mo\u017cesz teraz \u0142atwo zaimplementowa\u0107 przesy\u0142anie plik\u00f3w za pomoc\u0105 Ajax na swojej stronie internetowej. Chcia\u0142bym us\u0142ysze\u0107 twoje przemy\u015blenia w sekcji komentarzy poni\u017cej.<\/p>\n
Powi\u0105zane artyku\u0142y<\/h4>\n