{"id":28677,"date":"2021-05-26T09:19:00","date_gmt":"2021-05-26T06:19:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28677"},"modified":"2021-10-17T04:38:20","modified_gmt":"2021-10-17T01:38:20","slug":"dra-och-slapp-flera-filoverforingar-med-javascript-och-php","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/dra-och-slapp-flera-filoverforingar-med-javascript-och-php\/","title":{"rendered":"Dra och sl\u00e4pp flera fil\u00f6verf\u00f6ringar med JavaScript och PHP"},"content":{"rendered":"

Tidigare har jag skrivit en artikel Ladda och sl\u00e4pp fil\u00f6verf\u00f6ring med JavaScript och PHP<\/a>. Vissa l\u00e4sare bad att skriva en artikel om hur man l\u00e4gger till en filuppladdare som till\u00e5ter anv\u00e4ndare att ladda upp flera filer med dra och sl\u00e4pp-funktionerna.<\/p>\n

N\u00e4r du arbetar med en webbapplikation kan du beh\u00f6va ladda upp flera filer med en enda uppladdare i ditt formul\u00e4r. Det kan hj\u00e4lpa en anv\u00e4ndare att ladda upp enstaka eller flera filer p\u00e5 en g\u00e5ng. De gillar inte att ladda upp flera filer en efter en. Att ge en s\u00e5dan filuppladdningsfunktion ger en b\u00e4ttre anv\u00e4ndarupplevelse och p\u00e5skyndar ocks\u00e5 din applikation.<\/p>\n

I den h\u00e4r artikeln visar jag hur du l\u00e4gger till den h\u00e4r fil\u00f6verf\u00f6raren utan att anv\u00e4nda n\u00e5got externt dra och sl\u00e4pp-plugin. Jag laddar upp filerna med Ajax. Det betyder att filer laddas upp p\u00e5 servern utan att en hel sida laddas om.<\/p>\n

Komma ig\u00e5ng<\/h3>\n

Som jag sa kommer vi inte anv\u00e4nda n\u00e5got externt plugin f\u00f6r dra och sl\u00e4pp-funktionen. Jag ska skriva all kod fr\u00e5n b\u00f6rjan. Det \u00e4r mycket l\u00e4ttare. Det finns inga komplexa grejer i den. F\u00f6lj bara stegen nedan s\u00e5 \u00e4r du klar.<\/p>\n

L\u00e5t oss skapa en fil index.html<\/code>och l\u00e4gga till koden nedan i den.<\/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
H\u00e4r inkluderade jag style.css<\/code>och custom.js<\/code>d\u00e4r vi l\u00e4gger till en relaterad kod. Eftersom vi t\u00e4nker anv\u00e4nda Ajax inkluderade jag ett jQuery-bibliotek.<\/p>\n
F\u00f6r att ge ett grundl\u00e4ggande anv\u00e4ndargr\u00e4nssnitt f\u00f6r v\u00e5r filuppladdare, l\u00e5t oss l\u00e4gga till n\u00e5gra CSS-egenskaper. Naturligtvis kan du l\u00e4gga till din egen CSS f\u00f6r att ge ett annat utseende f\u00f6r filuppladdaren.<\/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
Efter detta b\u00f6r du se din filuppladdare som nedan sk\u00e4rmdump:<\/p>\n
\"Dra<\/a><\/p>\n
Dra och sl\u00e4pp flera filer med JavaScript och PHP<\/h3>\n
Du \u00e4r inst\u00e4lld p\u00e5 det grundl\u00e4ggande anv\u00e4ndargr\u00e4nssnittet. Nu kan vi forts\u00e4tta och skriva aktuell kod f\u00f6r JavaScript och PHP som laddar upp filer p\u00e5 en server. I v\u00e5r HTML lade jag till tv\u00e5 metoder upload_file() och file_explorer () som f\u00e5r samtal p\u00e5 drop-filer och v\u00e4ljer filer respektive.<\/p>\n
L\u00e5t oss definiera dessa metoder och skicka filerna till serversidan som laddar upp filer p\u00e5 en server.<\/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
Skriv slutligen en server-sida kod f\u00f6r filuppladdning i ajax.php<\/code>filen.<\/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
Den h\u00e4r koden skapar en "uppladdningskatalog" p\u00e5 din server och lagrar alla filer i den h\u00e4r katalogen. N\u00e4r vi lagrar filer p\u00e5 en server tar vi hand om att beh\u00e5lla det unika namnet p\u00e5 varje uppladdad fil med hj\u00e4lp av PHP-funktionen uniqid()<\/code>.<\/p>\n
Det handlar om att ladda upp flera filer med dra-sl\u00e4pp-funktionen. Jag hoppas att du fick veta om det. Jag skulle vilja h\u00f6ra dina tankar och f\u00f6rslag i kommentarsektionen nedan.<\/p>\n
relaterade artiklar<\/h4>\n