{"id":25282,"date":"2021-05-26T09:43:00","date_gmt":"2021-05-26T06:43:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25282"},"modified":"2021-10-17T18:47:19","modified_gmt":"2021-10-17T15:47:19","slug":"lohistage-mitme-faili-uleslaadimine-javascripti-ja-php-abil","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/et\/lohistage-mitme-faili-uleslaadimine-javascripti-ja-php-abil\/","title":{"rendered":"Lohistage mitme faili \u00fcleslaadimine JavaScripti ja PHP abil"},"content":{"rendered":"

Varem olen kirjutanud artikli Faili \u00fcleslaadimine lohistades JavaScripti ja PHP abil<\/a>. M\u00f5ned lugejad palusid kirjutada artikli failide \u00fcleslaadija lisamise kohta, mis v\u00f5imaldab kasutajatel pukseerimisfunktsioonidega \u00fcles laadida mitu faili.<\/p>\n

Veebirakenduse t\u00f6\u00f6tamise ajal peate v\u00f5ib-olla oma vormile \u00fcles laadima mitu faili \u00fche \u00fcleslaadijaga. See v\u00f5ib aidata kasutajal \u00fche v\u00f5i mitu faili \u00fche korraga \u00fcles laadida. Neile ei meeldi mitu faili \u00fckshaaval \u00fcles laadida. Sellise faili \u00fcleslaadimise funktsiooni andmine lisab paremat kasutuskogemust ja kiirendab ka teie rakendust.<\/p>\n

Selles artiklis n\u00e4itan teile, kuidas seda faili \u00fcleslaadijat lisada ilma v\u00e4list pukseerimispluginat kasutamata. Laadin failid \u00fcles Ajaxi abil. See t\u00e4hendab, et failid laaditakse serverisse \u00fcles ilma tervet lehte uuesti laadimata.<\/p>\n

Alustamine<\/h3>\n

Nagu ma \u00fctlesin, ei kasuta me pukseerimise ja lohistamise funktsiooni jaoks \u00fchtegi v\u00e4list pistikprogrammi. Kirjutan kogu koodi nullist. See on palju lihtsam. Selles pole keerukat kraami. J\u00e4rgige lihtsalt allolevaid samme ja olete valmis.<\/p>\n

Loome faili index.html<\/code>ja lisame sellesse koodi allpool.<\/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
Siia lisasin style.css<\/code>ja custom.js<\/code>kuhu lisame seotud koodi. Kuna kavatseme kasutada Ajaxi, lisasin sinna ka jQuery raamatukogu.<\/p>\n
Meie failide \u00fcleslaadija jaoks p\u00f5hiliidese andmiseks lisame m\u00f5ned CSS-i atribuudid. Muidugi saate failide \u00fcleslaadijale erineva ilme andmiseks lisada oma CSS-i.<\/p>\n
stiil.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
P\u00e4rast seda peaksite oma faili \u00fcleslaadijat n\u00e4gema nagu allpool kuvat\u00f5mmist:<\/p>\n
\"Lohistage<\/a><\/p>\n
Lohistage mitu faili JavaScripti ja PHP abil<\/h3>\n
Teile on m\u00e4\u00e4ratud p\u00f5hiliides. N\u00fc\u00fcd v\u00f5ime j\u00e4tkata ja kirjutada JavaScripti ja PHP jaoks tegeliku koodi, mis laadib failid serverisse \u00fcles. Lisasin meie HTML-i 2 meetodit upload_file() ja file_explorer (), mis kutsuvad drop-faile ja valivad vastavalt failid.<\/p>\n
M\u00e4\u00e4ratleme need meetodid ja edastame failid serveripoolsele skriptile, mis laadib failid serverisse \u00fcles.<\/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
L\u00f5puks kirjutage faili \u00fcleslaadimiseks serveripoolne kood ajax.php<\/code>.<\/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
See kood loob teie serverisse kataloogi "\u00fcleslaadimised" ja salvestab k\u00f5ik selles kataloogis olevad failid. Failide serverisse salvestamisel hoolitseme selle eest, et PHP-funktsiooni abil s\u00e4ilitataks iga \u00fcleslaaditud faili kordumatu nimi uniqid()<\/code>.<\/p>\n
See k\u00f5ik on mitme faili \u00fcleslaadimine lohistamisfunktsiooni abil. Loodan, et saite sellest teada. Tahaksin kuulda teie m\u00f5tteid ja ettepanekuid allpool olevas kommentaaride jaotises.<\/p>\n
seotud artiklid<\/h4>\n