{"id":28504,"date":"2021-05-26T09:43:00","date_gmt":"2021-05-26T06:43:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28504"},"modified":"2021-10-18T03:41:57","modified_gmt":"2021-10-18T00:41:57","slug":"przeciagnij-i-upusc-przesylanie-wielu-plikow-za-pomoca-javascript-i-php","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/przeciagnij-i-upusc-przesylanie-wielu-plikow-za-pomoca-javascript-i-php\/","title":{"rendered":"Przeci\u0105gnij i upu\u015b\u0107 przesy\u0142anie wielu plik\u00f3w za pomoc\u0105 JavaScript i PHP"},"content":{"rendered":"

W przesz\u0142o\u015bci napisa\u0142em artyku\u0142 Przeci\u0105gnij i upu\u015b\u0107 przesy\u0142anie plik\u00f3w za pomoc\u0105 JavaScript i PHP<\/a>. Niekt\u00f3rzy czytelnicy poprosili o napisanie artyku\u0142u na temat dodawania programu do przesy\u0142ania plik\u00f3w, kt\u00f3ry umo\u017cliwia u\u017cytkownikom przesy\u0142anie wielu plik\u00f3w za pomoc\u0105 funkcji przeci\u0105gania i upuszczania.<\/p>\n

Podczas pracy nad aplikacj\u0105 internetow\u0105 mo\u017ce by\u0107 konieczne przes\u0142anie wielu plik\u00f3w za pomoc\u0105 jednego programu do przesy\u0142ania w formularzu. Mo\u017ce pom\u00f3c u\u017cytkownikowi przes\u0142a\u0107 jeden lub wiele plik\u00f3w za jednym razem. Nie lubi\u0105 przesy\u0142a\u0107 wielu plik\u00f3w jeden po drugim. Zapewnienie takiej funkcji przesy\u0142ania plik\u00f3w zapewnia lepsze wra\u017cenia u\u017cytkownika, a tak\u017ce przyspiesza dzia\u0142anie aplikacji.<\/p>\n

W tym artykule poka\u017c\u0119, jak doda\u0107 ten program do przesy\u0142ania plik\u00f3w bez u\u017cycia zewn\u0119trznej wtyczki \u201eprzeci\u0105gnij i upu\u015b\u0107". Wrzuc\u0119 pliki za pomoc\u0105 Ajax. Oznacza to, \u017ce pliki zostan\u0105 przes\u0142ane na serwer bez prze\u0142adowywania ca\u0142ej strony.<\/p>\n

Pierwsze kroki<\/h3>\n

Jak powiedzia\u0142em, nie b\u0119dziemy u\u017cywa\u0107 \u017cadnej zewn\u0119trznej wtyczki do funkcji przeci\u0105gania i upuszczania. Napisz\u0119 ca\u0142y kod od zera. Jest o wiele \u0142atwiej. Nie ma w tym skomplikowanych rzeczy. Wystarczy wykona\u0107 poni\u017csze czynno\u015bci i gotowe.<\/p>\n

Stw\u00f3rzmy plik index.html<\/code>i dodajmy w nim kod poni\u017cej.<\/p>\n

index.html<\/strong><\/p>\n

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\u00a0\u00a0\u00a0\u00a0<title>Drag Drop Multiple File Upload<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<div id=\"drop_file_zone\" ondrop=\"upload_file(event)\" ondragover=\"return false\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div id=\"drag_upload_file\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>Drop file(s) here<\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>or<\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p><input type=\"button\" value=\"Select File(s)\" onclick=\"file_explorer();\"><\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"file\" id=\"selectfile\" multiple>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script src=\"custom.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
Tutaj umie\u015bci\u0142em style.css<\/code>i custom.js<\/code>w kt\u00f3rym dodamy powi\u0105zany kod. Poniewa\u017c zamierzamy u\u017cywa\u0107 Ajax, do\u0142\u0105czy\u0142em bibliotek\u0119 jQuery.<\/p>\n
Aby zapewni\u0107 podstawowy interfejs u\u017cytkownika dla naszego programu do przesy\u0142ania plik\u00f3w, dodajmy kilka w\u0142a\u015bciwo\u015bci CSS. Oczywi\u015bcie mo\u017cesz doda\u0107 w\u0142asny CSS, aby zmieni\u0107 wygl\u0105d programu do przesy\u0142ania plik\u00f3w.<\/p>\n
styl.css<\/strong><\/p>\n
#drop_file_zone {\n\u00a0\u00a0\u00a0\u00a0background-color: #EEE;\n\u00a0\u00a0\u00a0\u00a0border: #999 5px dashed;\n\u00a0\u00a0\u00a0\u00a0width: 290px;\n\u00a0\u00a0\u00a0\u00a0height: 200px;\n\u00a0\u00a0\u00a0\u00a0padding: 8px;\n\u00a0\u00a0\u00a0\u00a0font-size: 18px;\n}\n#drag_upload_file {\n\u00a0\u00a0\u00a0\u00a0width:50%;\n\u00a0\u00a0\u00a0\u00a0margin:0 auto;\n}\n#drag_upload_file p {\n\u00a0\u00a0\u00a0\u00a0text-align: center;\n}\n#drag_upload_file #selectfile {\n\u00a0\u00a0\u00a0\u00a0display: none;\n}<\/code><\/pre>\n
Nast\u0119pnie powiniene\u015b zobaczy\u0107 sw\u00f3j program do przesy\u0142ania plik\u00f3w, jak na poni\u017cszym zrzucie ekranu:<\/p>\n
\"Przeci\u0105gnij<\/a><\/p>\n
Przeci\u0105gnij i upu\u015b\u0107 wiele plik\u00f3w za pomoc\u0105 JavaScript i PHP<\/h3>\n
Jeste\u015b skonfigurowany z podstawowym interfejsem u\u017cytkownika. Teraz mo\u017cemy \u015bmia\u0142o pisa\u0107 kod dla JavaScript i PHP, kt\u00f3re przesy\u0142aj\u0105 pliki na serwer. W naszym kodzie HTML doda\u0142em 2 metody upload_file() i file_explorer(), kt\u00f3re wywo\u0142uj\u0105 odpowiednio pliki upuszczania i zaznaczania plik\u00f3w.<\/p>\n
Zdefiniujmy te metody i przeka\u017cmy pliki do skryptu po stronie serwera, kt\u00f3ry przesy\u0142a pliki na serwer.<\/p>\n
custom.js<\/strong><\/p>\n
var fileobj;\nfunction upload_file(e) {\n\u00a0\u00a0\u00a0\u00a0e.preventDefault();\n\u00a0\u00a0\u00a0\u00a0ajax_file_upload(e.dataTransfer.files);\n}\n\u00a0\nfunction file_explorer() {\n\u00a0\u00a0\u00a0\u00a0document.getElementById('selectfile').click();\n\u00a0\u00a0\u00a0\u00a0document.getElementById('selectfile').onchange = function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0files = document.getElementById('selectfile').files;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ajax_file_upload(files);\n\u00a0\u00a0\u00a0\u00a0};\n}\n\u00a0\nfunction ajax_file_upload(file_obj) {\n\u00a0\u00a0\u00a0\u00a0if(file_obj != undefined) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var form_data = new FormData();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for(i=0; i<file_obj.length; i++) {\u00a0 \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('file[]', file_obj[i]);\u00a0 \n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.ajax({\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\u00a0url: 'ajax.php',\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\u00a0alert(response);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#selectfile').val('');\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
Na koniec napisz w pliku kod po stronie serwera, aby przes\u0142a\u0107 ajax.php<\/code>plik.<\/p>\n
ajax.php<\/strong><\/p>\n
<?php\nforeach($_FILES['file']['name'] as $key=>$val){\n\u00a0\u00a0\u00a0\u00a0$file_name = $_FILES['file']['name'][$key];\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ get file extension\n\u00a0\u00a0\u00a0\u00a0$ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ get filename without extension\n\u00a0\u00a0\u00a0\u00a0$filenamewithoutextension = pathinfo($file_name, PATHINFO_FILENAME);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0if (!file_exists(getcwd(). '\/uploads')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0mkdir(getcwd(). '\/uploads', 0777);\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0$filename_to_store = $filenamewithoutextension. '_' .uniqid(). '.' .$ext;\n\u00a0\u00a0\u00a0\u00a0move_uploaded_file($_FILES['file']['tmp_name'][$key], getcwd(). '\/uploads\/'.$filename_to_store);\n}\necho \"File(s) uploaded successfully\";\ndie;<\/code><\/pre>\n
Ten kod tworzy na serwerze katalog \u201euploads” i przechowuje wszystkie pliki w tym katalogu. Podczas przechowywania plik\u00f3w na serwerze dbamy o zachowanie unikalnej nazwy ka\u017cdego przes\u0142anego pliku za pomoc\u0105 funkcji PHP uniqid()<\/code>.<\/p>\n
Wszystko sprowadza si\u0119 do przesy\u0142ania wielu plik\u00f3w za pomoc\u0105 funkcji przeci\u0105gnij i upu\u015b\u0107. Mam nadziej\u0119, \u017ce si\u0119 o tym dowiedzia\u0142e\u015b. Chcia\u0142bym us\u0142ysze\u0107 wasze przemy\u015blenia i sugestie w sekcji komentarzy poni\u017cej.<\/p>\n
Powi\u0105zane artyku\u0142y<\/h4>\n