{"id":24867,"date":"2021-05-26T09:44:00","date_gmt":"2021-05-26T06:44:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24867"},"modified":"2021-10-17T20:39:36","modified_gmt":"2021-10-17T17:39:36","slug":"veda-ja-pudota-useita-tiedostolatauksia-kayttamalla-javascriptia-ja-php-ta","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/veda-ja-pudota-useita-tiedostolatauksia-kayttamalla-javascriptia-ja-php-ta\/","title":{"rendered":"Ved\u00e4 ja pudota useita tiedostolatauksia k\u00e4ytt\u00e4m\u00e4ll\u00e4 JavaScripti\u00e4 ja PHP: t\u00e4"},"content":{"rendered":"

Aiemmin olen kirjoittanut artikkelin Ved\u00e4 ja pudota tiedostojen lataaminen JavaScriptin ja PHP: n avulla<\/a>. Jotkut lukijat pyysiv\u00e4t kirjoittamaan artikkelin tiedostojen latausohjelman lis\u00e4\u00e4misest\u00e4, jonka avulla k\u00e4ytt\u00e4j\u00e4t voivat ladata useita tiedostoja ved\u00e4 ja pudota -ominaisuuksien avulla.<\/p>\n

Ty\u00f6skennelless\u00e4si verkkosovelluksessa sinun on ehk\u00e4 ladattava useita tiedostoja yhdell\u00e4 latauslaitteella lomakkeellesi. Se voi auttaa k\u00e4ytt\u00e4j\u00e4\u00e4 lataamaan yhden tai useita tiedostoja kerralla. He eiv\u00e4t halua ladata useita tiedostoja yksi kerrallaan. T\u00e4llaisen tiedostonlatausominaisuuden antaminen lis\u00e4\u00e4 parempaa k\u00e4ytt\u00f6kokemusta ja my\u00f6s nopeuttaa sovellustasi.<\/p>\n

T\u00e4ss\u00e4 artikkelissa n\u00e4yt\u00e4n, kuinka voit lis\u00e4t\u00e4 t\u00e4m\u00e4n tiedostolatausohjelman k\u00e4ytt\u00e4m\u00e4tt\u00e4 ulkoista ved\u00e4 ja pudota -laajennusta. L\u00e4het\u00e4n tiedostot Ajaxilla. Se tarkoittaa, ett\u00e4 tiedostot ladataan palvelimelle lataamatta koko sivua uudelleen.<\/p>\n

P\u00e4\u00e4st\u00e4 alkuun<\/h3>\n

Kuten sanoin, emme k\u00e4yt\u00e4 mit\u00e4\u00e4n ulkoista laajennusta ved\u00e4 ja pudota -ominaisuuteen. Aion kirjoittaa kaiken koodin tyhj\u00e4st\u00e4. Se on paljon helpompaa. Siin\u00e4 ei ole monimutkaisia \u200b\u200bjuttuja. Seuraa vain alla olevia ohjeita ja olet valmis.<\/p>\n

Luodaan tiedosto index.html<\/code>ja lis\u00e4t\u00e4\u00e4n koodi sen alle.<\/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
T\u00e4ss\u00e4 olen mukana style.css<\/code>ja custom.js<\/code>johon lis\u00e4t\u00e4\u00e4n siihen liittyv\u00e4 koodi. Koska aiomme k\u00e4ytt\u00e4\u00e4 Ajaxia, otin mukaan jQuery-kirjaston.<\/p>\n
Annetaan perusk\u00e4ytt\u00f6liittym\u00e4 tiedostolatauksellemme lis\u00e4\u00e4m\u00e4ll\u00e4 joitain CSS-ominaisuuksia. Voit tietysti lis\u00e4t\u00e4 oman CSS: n, jotta tiedostojen latauslaite olisi erilainen.<\/p>\n
style.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
T\u00e4m\u00e4n j\u00e4lkeen sinun pit\u00e4isi n\u00e4hd\u00e4 tiedostojen latausohjelma kuten alla olevassa kuvakaappauksessa:<\/p>\n
\"Ved\u00e4<\/a><\/p>\n
Ved\u00e4 ja pudota useita tiedostoja JavaScriptin ja PHP: n avulla<\/h3>\n
Olet m\u00e4\u00e4ritt\u00e4nyt perusk\u00e4ytt\u00f6liittym\u00e4n. Nyt voimme menn\u00e4 eteenp\u00e4in ja kirjoittaa todellisen koodin JavaScriptille ja PHP: lle, jotka lataavat tiedostoja palvelimelle. HTML-koodiin lis\u00e4sin 2 menetelm\u00e4\u00e4 upload_file() ja file_explorer (), jotka kutsuvat pudotustiedostoja ja valitsevat tiedostot vastaavasti.<\/p>\n
M\u00e4\u00e4ritet\u00e4\u00e4n n\u00e4m\u00e4 menetelm\u00e4t ja v\u00e4litet\u00e4\u00e4n tiedostot palvelinpuolen komentosarjalle, joka lataa tiedostot palvelimelle.<\/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
Kirjoita lopuksi palvelinpuolen koodi tiedoston lataamista varten ajax.php<\/code>tiedostoon.<\/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
T\u00e4m\u00e4 koodi luo palvelimellesi ’uploads’ -hakemiston ja tallentaa kaikki tiedostot t\u00e4h\u00e4n hakemistoon. Tallennettaessa tiedostoja palvelimelle huolehdimme jokaisen ladatun tiedoston yksil\u00f6llisest\u00e4 nimest\u00e4 PHP-toiminnolla uniqid()<\/code>.<\/p>\n
Kyse on useiden tiedostojen lataamisesta vet\u00e4m\u00e4ll\u00e4 pudota-ominaisuutta. Toivon, ett\u00e4 sait tiet\u00e4\u00e4 siit\u00e4. Haluaisin kuulla ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.<\/p>\n
Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n