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

Czy chcesz zintegrowa\u0107 funkcj\u0119 przesy\u0142ania plik\u00f3w metod\u0105 \u201eprzeci\u0105gnij i upu\u015b\u0107” w swojej witrynie? Ta funkcja jest przyjazna dla u\u017cytkownika i zmniejsza liczb\u0119 klikni\u0119\u0107 u\u017cytkownik\u00f3w. W tym artykule dowiemy si\u0119, jak doda\u0107 funkcj\u0119 przesy\u0142ania plik\u00f3w metod\u0105 \u201eprzeci\u0105gnij i upu\u015b\u0107” za pomoc\u0105 JavaScript i PHP. B\u0119dziesz mie\u0107 r\u00f3wnie\u017c dane wej\u015bciowe do przegl\u0105dania pliku.<\/p>\n

Ostateczny interfejs u\u017cytkownika przesy\u0142ania plik\u00f3w b\u0119dzie wygl\u0105da\u0142 jak na poni\u017cszym obrazku.<\/p>\n

\"Przeci\u0105gnij<\/a><\/p>\n

Dlaczego potrzebujesz funkcji przeci\u0105gania i upuszczania plik\u00f3w?<\/h3>\n

Zawsze chcemy mie\u0107 lepsze wra\u017cenia u\u017cytkownika na stronie. Udost\u0119pnianie funkcji przeci\u0105gania i upuszczania w celu przesy\u0142ania plik\u00f3w jest \u0142atw\u0105 w u\u017cyciu opcj\u0105 dla u\u017cytkownik\u00f3w. Wiele popularnych stron internetowych, takich jak Facebook, WordPress ju\u017c korzysta z tej funkcji.<\/p>\n

Ta funkcja wygl\u0105da lepiej w por\u00f3wnaniu z tradycyjnym sposobem przesy\u0142ania plik\u00f3w. Poprawia r\u00f3wnie\u017c wygod\u0119 u\u017cytkownika, poniewa\u017c u\u017cytkownik po prostu przeci\u0105ga plik i przesy\u0142a go na serwer.<\/p>\n

W tym samouczku udost\u0119pnimy u\u017cytkownikom obie opcje. Plik mo\u017cna przes\u0142a\u0107 za pomoc\u0105 metody \u201eprzeci\u0105gnij i upu\u015b\u0107” lub poprzez wej\u015bcie pliku.<\/p>\n

Zamierzam u\u017cy\u0107 Ajax do przesy\u0142ania plik\u00f3w po stronie serwera. U\u017cywaj\u0105c Ajax, twoja strona nie zostanie za\u0142adowana. Po prostu wysy\u0142a plik do serwera w tle.<\/p>\n

Zintegruj narz\u0119dzie do przesy\u0142ania plik\u00f3w \u201eprzeci\u0105gnij i upu\u015b\u0107”<\/h3>\n

Na pocz\u0105tek napiszmy najpierw kod HTML. Poni\u017cszy kod HTML b\u0119dzie zawiera\u0142 kontener do przesy\u0142ania plik\u00f3w. Zawiera r\u00f3wnie\u017c plik CSS i JS, kt\u00f3ry stworz\u0119 w kolejnych krokach.<\/p>\n

<link rel=\"stylesheet\" href=\"style.css\">\n<div id=\"drop_file_zone\" ondrop=\"upload_file(event)\" ondragover=\"return false\">\n\u00a0\u00a0\u00a0\u00a0<div id=\"drag_upload_file\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>Drop file here<\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>or<\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p><input type=\"button\" value=\"Select File\" onclick=\"file_explorer();\"><\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"file\" id=\"selectfile\">\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/div>\n\u00a0\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n<script src=\"custom.js\"><\/script><\/code><\/pre>\n
W powy\u017cszym kodzie HTML wykorzysta\u0142em 2 zdarzenia \u2013 ondrop i onclick. Ich metody zdefiniuj\u0119 w custom.js<\/code>pliku. Wcze\u015bniej dodajmy kod CSS w style.css<\/code>pliku.<\/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\u00a0width:50%;\n\u00a0\u00a0margin:0 auto;\n}\n#drag_upload_file p {\n\u00a0\u00a0text-align: center;\n}\n#drag_upload_file #selectfile {\n\u00a0\u00a0display: none;\n}<\/code><\/pre>\n
Naszym celem jest to, \u017ce gdy u\u017cytkownik upuszcza lub przegl\u0105da plik, plik powinien zosta\u0107 przes\u0142any na serwer. W tym celu musisz napisa\u0107 kod JavaScript, kt\u00f3ry pobiera plik po stronie klienta i wysy\u0142a go na serwer.<\/p>\n
Aby obs\u0142u\u017cy\u0107 ten przep\u0142yw, dodaj poni\u017cszy kod do custom.js<\/code>pliku.<\/p>\n
var fileobj;\nfunction upload_file(e) {\n\u00a0\u00a0\u00a0\u00a0e.preventDefault();\n\u00a0\u00a0\u00a0\u00a0fileobj = e.dataTransfer.files[0];\n\u00a0\u00a0\u00a0\u00a0ajax_file_upload(fileobj);\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\u00a0fileobj = document.getElementById('selectfile').files[0];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ajax_file_upload(fileobj);\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();\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\u00a0form_data.append('file', file_obj);\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
Napisany powy\u017cej kod JavaScript automatycznie wykrywa opcje wybrane przez u\u017cytkownika do przes\u0142ania pliku. Na koniec funkcja ajax_file_upload()<\/code>pobiera obiekt pliku i przekazuje go do pliku Ajax.<\/p>\n
Prze\u015blij plik na serwer<\/h4>\n
W pliku Ajax napisz\u0119 rzeczywisty kod, kt\u00f3ry wgrywa plik na serwer. Utw\u00f3rz plik o nazwie ajax.php<\/code>i dodaj do niego poni\u017cszy kod.<\/p>\n
<?php\n$arr_file_types = ['image\/png', 'image\/gif', 'image\/jpg', 'image\/jpeg'];\n\u00a0\nif (!(in_array($_FILES['file']['type'], $arr_file_types))) {\n\u00a0\u00a0\u00a0\u00a0echo \"false\";\n\u00a0\u00a0\u00a0\u00a0return;\n}\n\u00a0\nif (!file_exists('uploads')) {\n\u00a0\u00a0\u00a0\u00a0mkdir('uploads', 0777);\n}\n\u00a0\nmove_uploaded_file($_FILES['file']['tmp_name'], 'uploads\/'. time(). '_'. $_FILES['file']['name']);\n\u00a0\necho \"File uploaded successfully.\";<\/code><\/pre>\n
Ten kod PHP sprawdza najpierw, czy folder o nazwie \u201eprzesy\u0142ane” istnieje na serwerze. Je\u015bli nie, tworzy katalog \u201euploads” i przenosi do niego plik. Mo\u017cesz dostosowa\u0107 t\u0119 \u015bcie\u017ck\u0119 katalogu zgodnie z wymaganiami.<\/p>\n
Mam nadziej\u0119, \u017ce rozumiesz, jak doda\u0107 przesy\u0142anie plik\u00f3w metod\u0105 \u201eprzeci\u0105gnij i upu\u015b\u0107” za pomoc\u0105 PHP i JavaScript. Daj mi zna\u0107 swoje przemy\u015blenia i sugestie w poni\u017cszym komentarzu.<\/p>\n
Powi\u0105zane artyku\u0142y<\/h4>\n