{"id":25269,"date":"2021-05-26T19:24:00","date_gmt":"2021-05-26T16:24:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=25269"},"modified":"2021-10-17T18:45:30","modified_gmt":"2021-10-17T15:45:30","slug":"pukseerige-faili-uleslaadimine-javascripti-ja-php-abil","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/et\/pukseerige-faili-uleslaadimine-javascripti-ja-php-abil\/","title":{"rendered":"Pukseerige faili \u00fcleslaadimine JavaScripti ja PHP abil"},"content":{"rendered":"

Kas soovite oma veebisaidile integreerida failide \u00fcleslaadimise funktsiooni? See funktsioon on kasutajas\u00f5bralik ja v\u00e4hendab kasutajate klikke. Selles artiklis uurime, kuidas lisada JavaScripti ja PHP abil failide \u00fcleslaadimise funktsioone. Faili sirvimiseks on teil ka failisisestus.<\/p>\n

L\u00f5plik faili \u00fcleslaadimise kasutajaliides n\u00e4eb v\u00e4lja nagu allolev pilt.<\/p>\n

\"Pukseerige<\/a><\/p>\n

Miks on vaja failide \u00fcleslaadimise funktsiooni lohistada?<\/h3>\n

Soovime veebisaidil alati paremat kasutuskogemust saada. Failide \u00fcleslaadimiseks lohistamisfunktsiooni andmine on teie kasutajatele h\u00f5lpsasti kasutatav valik. Paljud populaarsed veebisaidid nagu Facebook, WordPress kasutavad seda funktsiooni juba praegu.<\/p>\n

See funktsioon n\u00e4eb parem v\u00e4lja, v\u00f5rreldes tavap\u00e4rase failide \u00fcleslaadimise viisiga. See parandab ka kasutajakogemust, kuna kasutaja lihtsalt lohistab faili ja laadib selle \u00fcles serverisse.<\/p>\n

Selles \u00f5petuses anname kasutajatele m\u00f5lemad v\u00f5imalused. Faili saab \u00fcles laadida kas lohistades v\u00f5i sisestades faili.<\/p>\n

Kasutan Ajaxi failide serverisse \u00fcleslaadimiseks. Ajaxi kasutades ei laadita teie lehte. See lihtsalt saadab faili serverisse taustal.<\/p>\n

Integreeri faili \u00fcleslaadija<\/h3>\n

Alustamiseks kirjutame k\u00f5igepealt HTML-koodi. J\u00e4rgmisel HTML-koodil on failide \u00fcleslaadimiseks konteiner. See sisaldab ka CSS- ja JS-faile, mille ma j\u00e4rgmiste toimingutega loon.<\/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
\u00dclaltoodud HTML-is kasutasin kahte s\u00fcndmust – ondrop ja onclick. Ma m\u00e4\u00e4ratlen nende meetodid custom.js<\/code>failis. Enne seda lisame style.css<\/code>faili CSS-koodi .<\/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
Meie eesm\u00e4rk on, kui kasutaja loobub failist v\u00f5i sirvib seda, peaks fail \u00fcles laadima serverisse. Selleks peate kirjutama JavaScripti koodi, mis v\u00f5tab faili kliendipoolelt ja saatma selle serverisse.<\/p>\n
Selle voo k\u00e4sitsemiseks lisage custom.js<\/code>faili allolev kood .<\/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
Eespool kirjutatud JavaScripti kood tuvastab automaatselt faili \u00fcleslaadimiseks valitud kasutajad. L\u00f5puks ajax_file_upload()<\/code>v\u00f5tab funktsioon faili objekti ja edastab selle Ajaxi faili.<\/p>\n
Laadige fail serverisse \u00fcles<\/h4>\n
Ajaxi faili kirjutan tegeliku koodi, mis faili serverisse \u00fcles laadib. Looge fail nimega ajax.php<\/code>ja lisage sellesse allolev kood.<\/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
See PHP-kood kontrollib k\u00f5igepealt, kas serveris on kaust nimega ‘uploads’. Kui ei, siis loob see kataloogi "\u00fcleslaadimised" ja teisaldab faili selles sees. Saate seda kataloogitee muuta vastavalt oma n\u00f5udele.<\/p>\n
Loodan, et saate aru, kuidas lisada faili \u00fcleslaadimise PHP ja JavaScripti abil. Andke mulle teada oma m\u00f5tetest ja ettepanekutest allpool olevas kommentaaris.<\/p>\n
seotud artiklid<\/h4>\n