{"id":24856,"date":"2021-05-26T18:34:00","date_gmt":"2021-05-26T15:34:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24856"},"modified":"2021-10-17T20:38:31","modified_gmt":"2021-10-17T17:38:31","slug":"veda-ja-pudota-tiedostolataus-kayttamalla-javascriptia-ja-php-ta","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/veda-ja-pudota-tiedostolataus-kayttamalla-javascriptia-ja-php-ta\/","title":{"rendered":"Ved\u00e4 ja pudota tiedostolataus k\u00e4ytt\u00e4m\u00e4ll\u00e4 JavaScripti\u00e4 ja PHP: t\u00e4"},"content":{"rendered":"

Aiotko integroida ved\u00e4 ja pudota -toiminnon tiedostojen latausominaisuuden verkkosivustollesi? T\u00e4m\u00e4 ominaisuus on k\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4llinen ja v\u00e4hent\u00e4\u00e4 k\u00e4ytt\u00e4jien napsautuksia. T\u00e4ss\u00e4 artikkelissa tutkitaan kuinka lis\u00e4t\u00e4 toimintoja vet\u00e4m\u00e4ll\u00e4 ja pudottamalla tiedostojen lataamiseen JavaScriptin ja PHP: n avulla. Sinulla on my\u00f6s tiedostosy\u00f6tt\u00f6 tiedoston selaamiseksi.<\/p>\n

Lopullinen tiedostojen lataamisen k\u00e4ytt\u00f6liittym\u00e4 n\u00e4ytt\u00e4\u00e4 alla olevalta kuvalta.<\/p>\n

\"Ved\u00e4<\/a><\/p>\n

Miksi tarvitset ved\u00e4 ja pudota -toiminnon?<\/h3>\n

Haluamme aina saada paremman k\u00e4ytt\u00f6kokemuksen verkkosivustolla. Ved\u00e4 ja pudota -ominaisuuden antaminen tiedostojen lataamiseksi on helppok\u00e4ytt\u00f6inen vaihtoehto k\u00e4ytt\u00e4jillesi. Monet suosituista verkkosivustoista, kuten Facebook, WordPress, k\u00e4ytt\u00e4v\u00e4t jo t\u00e4t\u00e4 ominaisuutta.<\/p>\n

T\u00e4m\u00e4 ominaisuus n\u00e4ytt\u00e4\u00e4 paremmalta verrattuna perinteiseen tiedostojen lataustapaan. Se parantaa my\u00f6s k\u00e4ytt\u00f6kokemusta, kun k\u00e4ytt\u00e4j\u00e4 yksinkertaisesti vet\u00e4\u00e4 tiedoston ja lataa sen palvelimelle.<\/p>\n

T\u00e4ss\u00e4 opetusohjelmassa annamme molemmat vaihtoehdot k\u00e4ytt\u00e4jille. Tiedosto voidaan ladata joko vet\u00e4m\u00e4ll\u00e4 ja pudottamalla tai tiedoston sy\u00f6tteen kautta.<\/p>\n

Aion k\u00e4ytt\u00e4\u00e4 Ajaxia tiedostojen lataamiseen palvelinpuolelle. Ajaxia k\u00e4ytt\u00e4m\u00e4ll\u00e4 sivua ei ladata. Se yksinkertaisesti l\u00e4hett\u00e4\u00e4 tiedoston palvelimelle taustalla.<\/p>\n

Integroi ved\u00e4 ja pudota -toiminto<\/h3>\n

Aloitetaan kirjoittamalla ensin HTML-koodi. Seuraavassa HTML-koodissa on s\u00e4il\u00f6 tiedostojen lataamista varten. Se sis\u00e4lt\u00e4\u00e4 my\u00f6s CSS- ja JS-tiedoston, jotka luon seuraavissa vaiheissa.<\/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
Yll\u00e4 olevassa HTML: ss\u00e4 k\u00e4ytin kahta tapahtumaa – ondrop ja onclick. M\u00e4\u00e4rit\u00e4n heid\u00e4n menetelm\u00e4ns\u00e4 custom.js<\/code>tiedostossa. Ennen sit\u00e4 lis\u00e4t\u00e4\u00e4n CSS-koodi style.css<\/code>tiedostoon.<\/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
Tavoitteenamme on, ett\u00e4 kun k\u00e4ytt\u00e4j\u00e4 pudottaa tai selaa tiedostoa, tiedoston pit\u00e4isi ladata palvelimelle. T\u00e4t\u00e4 varten sinun on kirjoitettava JavaScript-koodi, joka vie tiedoston asiakaspuolelta ja l\u00e4hett\u00e4\u00e4 sen palvelimelle.<\/p>\n
Voit k\u00e4sitell\u00e4 t\u00e4t\u00e4 kulkua lis\u00e4\u00e4m\u00e4ll\u00e4 alla olevan koodin custom.js<\/code>tiedostoon.<\/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
Yll\u00e4 kirjoitettu JavaScript-koodi tunnistaa automaattisesti k\u00e4ytt\u00e4j\u00e4n ladatut vaihtoehdot. Lopuksi toiminto ajax_file_upload()<\/code>vie tiedosto-objektin ja v\u00e4litt\u00e4\u00e4 sen Ajax-tiedostoon.<\/p>\n
L\u00e4het\u00e4 tiedosto palvelimelle<\/h4>\n
Kirjoitan Ajax-tiedostoon varsinaisen koodin, joka l\u00e4hett\u00e4\u00e4 tiedoston palvelimelle. Luo tiedosto nimelt\u00e4 nimelt\u00e4 ajax.php<\/code>ja lis\u00e4\u00e4 siihen alla oleva koodi.<\/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
T\u00e4m\u00e4 PHP-koodi tarkistaa ensin, onko palvelimella kansio nimelt\u00e4 uploads. Jos ei, se luo ’uploads’ -hakemiston ja siirt\u00e4\u00e4 tiedoston sen sis\u00e4ll\u00e4. Voit s\u00e4\u00e4t\u00e4\u00e4 t\u00e4t\u00e4 hakemistopolkua vaatimuksesi mukaan.<\/p>\n
Toivon, ett\u00e4 ymm\u00e4rr\u00e4t kuinka lis\u00e4t\u00e4 ved\u00e4 ja pudota -tiedostolataus PHP: ll\u00e4 ja JavaScriptill\u00e4. Kerro minulle ajatuksesi ja ehdotuksesi alla olevassa kommentissa.<\/p>\n
Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n