{"id":28380,"date":"2021-05-22T14:02:00","date_gmt":"2021-05-22T11:02:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28380"},"modified":"2021-10-17T04:43:32","modified_gmt":"2021-10-17T01:43:32","slug":"ajax-filoverforing-med-php-och-jquery","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/ajax-filoverforing-med-php-och-jquery\/","title":{"rendered":"Ajax-fil\u00f6verf\u00f6ring med PHP och jQuery"},"content":{"rendered":"<p>Letar du efter en fil\u00f6verf\u00f6ring med Ajax i PHP? Att ladda upp en fil via Ajax \u00e4r trendiga saker idag. Det ger en b\u00e4ttre anv\u00e4ndarupplevelse p\u00e5 en webbplats. I den h\u00e4r artikeln visar jag hur du laddar upp filer via Ajax med PHP och jQuery.<\/p>\n<p>Ladda upp fil \/ bild \u00e4r en vanlig uppgift f\u00f6r utvecklare. Det finns flera fall d\u00e4r du beh\u00f6ver bygga fil\u00f6verf\u00f6ringsfunktionalitet. N\u00e5gra av de vanligaste exemplen \u00e4r att ladda upp profilbilder, skjutreglage, vittnesm\u00e5l, portf\u00f6ljer, karuseller etc.<\/p>\n<h3>Varf\u00f6r beh\u00f6ver du fil\u00f6verf\u00f6ring med Ajax?<\/h3>\n<p>Den fr\u00e4msta anledningen till att du utf\u00f6r fil\u00f6verf\u00f6ring via Ajax \u00e4r att du inte vill uppdatera en sida efter fil\u00f6verf\u00f6ring. Och det \u00e4r uppenbart. Det g\u00e5r inte att ladda en hel sida om det inte beh\u00f6vs. Om du laddar en sida efter fil\u00f6verf\u00f6ring l\u00e4gger du till extra belastning p\u00e5 en server.<\/p>\n<p>Fil\u00f6verf\u00f6ring med Ajax minskar on\u00f6dig belastning p\u00e5 en server och ger en b\u00e4ttre anv\u00e4ndarupplevelse p\u00e5 webbplatsen.<\/p>\n<p>S\u00e5 utan ytterligare dr\u00f6jsm\u00e5l, l\u00e5t oss b\u00f6rja med koden.<\/p>\n<h3>Fil\u00f6verf\u00f6ring med Ajax med PHP och jQuery<\/h3>\n<p>L\u00e5t oss b\u00f6rja med att skapa ett formul\u00e4r som har en filinmatning och skicka-knappen. L\u00e4gg till nedanst\u00e5ende HTML-kod i din fil s\u00e4g <code>index.php<\/code>.<\/p>\n<pre><code>&lt;form&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;p&gt;&lt;input type=\"file\" name=\"file\" class=\"file\" required&gt;&lt;\/p&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;input type=\"submit\" name=\"submit\" class=\"submit\" value=\"Submit\"&gt;\n&lt;\/form&gt;<\/code><\/pre>\n<p>Eftersom jag ska skriva lite JavaScript-kod, lade jag till klassen &#8217;fil&#8217; och &#8217;skicka&#8217; till filinmatning respektive skicka-knappen. Dessa klasser fungerar som en identifierare f\u00f6r formelement.<\/p>\n<h4>JavaScript-kod<\/h4>\n<p>Skriv sedan lite JavaScript-kod som ger ett Ajax-samtal till en serversida och hanterar svaret.<\/p>\n<pre><code>&lt;script src=\"https:\/\/code.jquery.com\/jquery-3.5.0.js\"&gt;&lt;\/script&gt;\n&lt;script type=\"text\/javascript\"&gt;\n\u00a0\u00a0\u00a0\u00a0$(function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.submit').on('click', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var file_data = $('.file').prop('files')[0];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(file_data != undefined) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\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\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('file', file_data);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.ajax({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\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\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: 'ajax.php',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\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\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0processData: false,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\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\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\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(response == 'success') {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert('File uploaded successfully.');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert('Something went wrong. Please try again.');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.file').val('');\n\u00a0\u00a0\u00a0\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\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return false;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\n&lt;\/script&gt;<\/code><\/pre>\n<p>I JavaScript-koden ovan skickar jag filinneh\u00e5ll till <code>ajax.php<\/code>filen och hanterar ocks\u00e5 svaret.<\/p>\n<h4>PHP-kod<\/h4>\n<p>I det h\u00e4r skedet \u00e4r vi klara med att skicka filinneh\u00e5llet till serversidan. Skapa nu en fil <code>ajax.php<\/code>d\u00e4r vi m\u00e5ste skriva PHP-koden som laddar upp filer p\u00e5 en server.<\/p>\n<p><strong>ajax.php<\/strong><\/p>\n<pre><code>&lt;?php\nif (!file_exists('uploads')) {\n\u00a0\u00a0\u00a0\u00a0mkdir('uploads', 0777);\n}\n\u00a0\u00a0\nmove_uploaded_file($_FILES['file']['tmp_name'], 'uploads\/'. $_FILES['file']['name']);\n\u00a0\u00a0\necho \"success\";\ndie();<\/code><\/pre>\n<p>Ovanst\u00e5ende PHP-kod s\u00f6ker f\u00f6rst efter &#8217;uppladdningar&#8217; -katalog. Om den h\u00e4r katalogen inte finns skapar den den och laddar upp filen i den h\u00e4r mappen.<\/p>\n<p>Jag hoppas att du nu enkelt kan implementera fil\u00f6verf\u00f6ring med Ajax p\u00e5 din webbplats. Jag skulle vilja h\u00f6ra dina tankar i kommentarf\u00e4ltet nedan.<\/p>\n<h4>relaterade artiklar<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/sv\/hur-man-laddar-wordpress-inlagg-med-ajax\/\" title=\"Hur man laddar WordPress-inl\u00e4gg med AJAX\" >Hur man laddar WordPress-inl\u00e4gg med AJAX<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/sv\/hur-man-anvander-jquery-autofullstandig-med-ajax\/\" title=\"Hur man anv\u00e4nder jQuery Autocomplete med Ajax\" >Hur man anv\u00e4nder jQuery Autocomplete med Ajax<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/sv\/dra-och-slapp-filoverforing-med-javascript-och-php\/\" title=\"Dra och sl\u00e4pp fil\u00f6verf\u00f6ring med JavaScript och PHP\" >Dra och sl\u00e4pp fil\u00f6verf\u00f6ring med JavaScript och PHP<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ajax-fil\u00f6verf\u00f6ring \u00e4r en vanlig uppgift f\u00f6r en webbplats. I den h\u00e4r guiden visar vi dig hur du utf\u00f6r Ajax fil\u00f6verf\u00f6ringsuppgift. Det \u00e4r v\u00e4ldigt enkelt att implementera.<\/p>\n","protected":false},"author":1,"featured_media":22140,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[279],"tags":[850],"class_list":["post-28380","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php-10","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/28380","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/comments?post=28380"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/posts\/28380\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media\/22140"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/media?parent=28380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/categories?post=28380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/sv\/wp-json\/wp\/v2\/tags?post=28380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}