{"id":28665,"date":"2021-05-26T18:58:00","date_gmt":"2021-05-26T15:58:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28665"},"modified":"2021-10-17T04:37:25","modified_gmt":"2021-10-17T01:37:25","slug":"dra-och-slapp-filoverforing-med-javascript-och-php","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/dra-och-slapp-filoverforing-med-javascript-och-php\/","title":{"rendered":"Dra och sl\u00e4pp fil\u00f6verf\u00f6ring med JavaScript och PHP"},"content":{"rendered":"

Vill du integrera dra och sl\u00e4pp-fil\u00f6verf\u00f6ringsfunktionen p\u00e5 din webbplats? Den h\u00e4r funktionen \u00e4r anv\u00e4ndarv\u00e4nlig och minskar anv\u00e4ndarnas klick. I den h\u00e4r artikeln studerar vi hur du l\u00e4gger till funktionalitet f\u00f6r att dra och sl\u00e4ppa fil\u00f6verf\u00f6ring med JavaScript och PHP. Du kommer ocks\u00e5 att ha filinmatning f\u00f6r att bl\u00e4ddra i en fil.<\/p>\n

Det sista anv\u00e4ndargr\u00e4nssnittet f\u00f6r fil\u00f6verf\u00f6ring ser ut som bilden nedan.<\/p>\n

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

Varf\u00f6r beh\u00f6ver du dra och sl\u00e4pp fil\u00f6verf\u00f6ringsfunktion?<\/h3>\n

Vi vill alltid ha en b\u00e4ttre anv\u00e4ndarupplevelse p\u00e5 webbplatsen. Att ge dra och sl\u00e4pp-funktionen f\u00f6r att ladda upp filer \u00e4r ett l\u00e4ttanv\u00e4nt alternativ f\u00f6r dina anv\u00e4ndare. M\u00e5nga popul\u00e4ra webbplatser som Facebook, WordPress anv\u00e4nder redan den h\u00e4r funktionen.<\/p>\n

Denna funktion ser b\u00e4ttre ut j\u00e4mf\u00f6rt med det traditionella s\u00e4ttet att ladda upp filer. Det f\u00f6rb\u00e4ttrar ocks\u00e5 anv\u00e4ndarupplevelsen eftersom anv\u00e4ndaren helt enkelt drar filen och laddar upp den p\u00e5 en server.<\/p>\n

I denna handledning kommer vi att ge b\u00e5da alternativen till anv\u00e4ndarna. Man kan ladda upp filen antingen med dra och sl\u00e4pp eller genom filinmatningen.<\/p>\n

Jag ska anv\u00e4nda Ajax f\u00f6r att ladda upp filer p\u00e5 serversidan. Om du anv\u00e4nder Ajax laddas din sida inte. Den skickar helt enkelt filen till servern i bakgrunden.<\/p>\n

Integrera Drag & Drop File Uploader<\/h3>\n

F\u00f6r att komma ig\u00e5ng, l\u00e5t oss f\u00f6rst skriva HTML-koden. F\u00f6ljande HTML-kod kommer att ha en beh\u00e5llare f\u00f6r fil\u00f6verf\u00f6ring. Den inneh\u00e5ller ocks\u00e5 en CSS- och JS-fil som jag skapar i n\u00e4sta steg.<\/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
I ovanst\u00e5ende HTML anv\u00e4nde jag de tv\u00e5 h\u00e4ndelserna – ondrop och onclick. Jag kommer att definiera deras metoder i custom.js<\/code>filen. Innan det, l\u00e5t oss l\u00e4gga till CSS-koden i style.css<\/code>filen.<\/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
V\u00e5rt m\u00e5l \u00e4r att n\u00e4r en anv\u00e4ndare tappar eller bl\u00e4ddrar i en fil ska filen laddas upp till servern. F\u00f6r detta m\u00e5ste du skriva JavaScript-kod som tar en fil fr\u00e5n klientsidan och skickar den till servern.<\/p>\n
F\u00f6r att hantera detta fl\u00f6de, l\u00e4gg till koden nedan i custom.js<\/code>filen.<\/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
JavaScript-koden skriven ovan uppt\u00e4cker automatiskt de alternativ som anv\u00e4ndaren valt f\u00f6r att ladda upp en fil. Slutligen ajax_file_upload()<\/code>tar funktionen filobjektet och skickar det till Ajax-filen.<\/p>\n
Ladda upp fil p\u00e5 servern<\/h4>\n
I Ajax-filen skriver jag den faktiska koden som laddar upp filen p\u00e5 servern. Skapa en fil som heter ajax.php<\/code>och l\u00e4gg till koden nedan i den.<\/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
Denna PHP-kod kontrollerar f\u00f6rst om mappen som heter "uppladdningar" finns p\u00e5 en server. Om inte, skapar den en katalog med "uppladdningar" och flyttar filen inuti den. Du kan justera den h\u00e4r katalogv\u00e4gen enligt dina krav.<\/p>\n
Jag hoppas att du f\u00f6rst\u00e5r hur du l\u00e4gger till dra-och-sl\u00e4pp-fil\u00f6verf\u00f6ring med PHP och JavaScript. L\u00e5t mig veta dina tankar och f\u00f6rslag i kommentaren nedan.<\/p>\n
relaterade artiklar<\/h4>\n