{"id":28694,"date":"2021-05-27T14:50:00","date_gmt":"2021-05-27T11:50:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28694"},"modified":"2021-10-17T04:36:37","modified_gmt":"2021-10-17T01:36:37","slug":"hur-man-integrerar-ajax-filoverforing-i-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/sv\/hur-man-integrerar-ajax-filoverforing-i-wordpress\/","title":{"rendered":"Hur man integrerar Ajax-fil\u00f6verf\u00f6ring i WordPress"},"content":{"rendered":"

Vill du implementera Ajax-fil\u00f6verf\u00f6ring i WordPress? Ibland m\u00e5ste du utf\u00f6ra en uppgift som laddar upp en fil via Ajax. I den h\u00e4r artikeln studerar vi hur man g\u00f6r Ajax-fil\u00f6verf\u00f6ring i WordPress.<\/p>\n

En f\u00f6rdel med att ladda upp filer via Ajax \u00e4r att det minskar din serverbelastning. Din sida laddas inte om vilket sparar extra samtal till en server och s\u00e5 bandbredden. Det ger ocks\u00e5 en b\u00e4ttre anv\u00e4ndarupplevelse p\u00e5 din webbplats.<\/p>\n

Normalt n\u00e4r vi arbetar med Ajax ringer vi till URL och skickar data till eller f\u00e5r data fr\u00e5n den angivna URL: n. WordPress har ett n\u00e5got annat s\u00e4tt att utf\u00f6ra Ajax-operationer. I WordPress ringer vi till webbadressen men koden vi skriver f\u00f6r att bearbeta data kommer att ing\u00e5 i funktionen. D\u00e5 m\u00e5ste denna funktion kartl\u00e4ggas med ’action’ -v\u00e4rdet skickat i Ajax-parametrar. F\u00f6rvirrad? L\u00e5t oss se det i aktion.<\/p>\n

Ajax-fil\u00f6verf\u00f6ring i WordPress<\/h3>\n

F\u00f6r att komma ig\u00e5ng beh\u00f6ver du ett formul\u00e4r med filinmatningen. Vi ger ett Ajax-samtal om valet av en fil och laddar upp filen till en server. F\u00f6r att skapa ett formul\u00e4r, l\u00e4gg till nedanst\u00e5ende HTML i din sidmall.<\/p>\n

<form class=\"fileUpload\" enctype=\"multipart\/form-data\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label><?php _e('Choose File:'); ?><\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"file\" id=\"file\" accept=\"image\/*\" \/>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/form><\/code><\/pre>\n
D\u00e4refter m\u00e5ste du ringa ett Ajax-samtal om \u00e4ndringsh\u00e4ndelsen f\u00f6r filinmatning. N\u00e4r vi skickar ett filinneh\u00e5ll till Ajax kommer din kod att vara n\u00e5got annorlunda j\u00e4mf\u00f6rt med vanlig jQuery-kod f\u00f6r WordPress Ajax<\/a>.<\/p>\n
Inkludera JS-fil i WordPress<\/h4>\n
L\u00e5t oss f\u00f6rst inkludera JS-filen i en WordPress-milj\u00f6. Den h\u00e4r koden g\u00e5r in i functions.php<\/code>filen eller i ett platsspecifikt plugin.<\/p>\n
function aw_scripts() {\n\u00a0\u00a0\u00a0\u00a0\/\/ Register the script\n\u00a0\u00a0\u00a0\u00a0wp_register_script( 'aw-custom', get_stylesheet_directory_uri(). '\/js\/custom.js', array('jquery'), '1.1', true );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Localize the script with new data\n\u00a0\u00a0\u00a0\u00a0$script_data_array = array(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'ajaxurl' => admin_url( 'admin-ajax.php' ),\n\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0wp_localize_script( 'aw-custom', 'aw', $script_data_array );\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\/\/ Enqueued script with localized data.\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script( 'aw-custom' );\n}\n\u00a0\nadd_action( 'wp_enqueue_scripts', 'aw_scripts' );<\/code><\/pre>\n
Ladda upp fil p\u00e5 servern<\/h4>\n
Du \u00e4r redo med formul\u00e4ret och JS-filen. L\u00e4gg nu till koden nedan i JS-filen som skickar filinneh\u00e5ll till serversidan via Ajax.<\/p>\n
custom.js<\/strong><\/p>\n
jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0$('body').on('change', '#file', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this = $(this);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0file_data = $(this).prop('files')[0];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data = new FormData();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('file', file_data);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('action', 'file_upload');\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.ajax({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: aw.ajaxurl,\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\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\u00a0$this.val('');\n\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}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0});\u00a0\u00a0\u00a0 \n});<\/code><\/pre>\n
Den viktiga delen av koden ovan \u00e4r att vi l\u00e4gger till en \u00e5tg\u00e4rd ’file_upload’ till form_data-objektet. Vi kommer att anv\u00e4nda denna ’file_upload’ -\u00e5tg\u00e4rd f\u00f6r att forts\u00e4tta med formul\u00e4rdata.<\/p>\n
I functions.php<\/code>, karta denna \u00e5tg\u00e4rd med Ajax p\u00e5 f\u00f6ljande s\u00e4tt:<\/p>\n
add_action( 'wp_ajax_file_upload', 'file_upload_callback' );\nadd_action( 'wp_ajax_nopriv_file_upload', 'file_upload_callback' );<\/code><\/pre>\n
Om du skriver den h\u00e4r koden i ett plugin beh\u00f6ver du inte skriva ett andra uttalande. H\u00e4r till ’wp ajax_’ och ’wp_ajax_nopriv ’ l\u00e4gger vi till \u00e5tg\u00e4rdsv\u00e4rdet som \u00e4r ’file_upload’. Den andra parametern ’file_upload_callback’ \u00e4r \u00e5teruppringningsmetoden som har den faktiska koden f\u00f6r fil\u00f6verf\u00f6ring.<\/p>\n
function file_upload_callback() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$arr_img_ext = array('image\/png', 'image\/jpeg', 'image\/jpg', 'image\/gif');\n\u00a0\u00a0\u00a0\u00a0if (in_array($_FILES['file']['type'], $arr_img_ext)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$upload = wp_upload_bits($_FILES[\"file\"][\"name\"], null, file_get_contents($_FILES[\"file\"][\"tmp_name\"]));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/$upload['url'] will gives you uploaded file path\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0wp_die();\n}<\/code><\/pre>\n
Jag anv\u00e4nder en wp_upload_bits-<\/a> metod f\u00f6r att ladda upp filen p\u00e5 en server. Denna metod lagrar en fil direkt i wp-content \/ uploads-katalogen.<\/p>\n
Forts\u00e4tt och f\u00f6rs\u00f6k ladda upp en fil. Din fil b\u00f6r laddas upp till wp-content \/ uppladdningar \/ mappen. Observera att du hittar din fil i den aktuella m\u00e5nadskatalogen med uppladdningskatalogen.<\/p>\n
Ladda upp flera filer med Ajax i WordPress<\/h3>\n
Hittills har vi diskuterat uppladdning av en enda fil via Ajax. Det kan finnas en situation n\u00e4r du vill ladda upp flera filer med Ajax. L\u00e5t oss se hur man uppn\u00e5r det.<\/p>\n
F\u00f6r att ladda upp flera filer m\u00e5ste du g\u00f6ra sm\u00e5 f\u00f6r\u00e4ndringar i ovanst\u00e5ende HTML-, JS- och PHP-kod.<\/p>\n
HTML tillhandah\u00e5ller ett "flera" attribut som till\u00e5ter en anv\u00e4ndare att v\u00e4lja flera filer p\u00e5 filinmatning.<\/p>\n
HTML-kod<\/strong><\/p>\n
<form class=\"fileUpload\" enctype=\"multipart\/form-data\">\n\u00a0\u00a0\u00a0\u00a0<div class=\"form-group\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<label><?php _e('Choose File:'); ?><\/label>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input type=\"file\" id=\"file\" accept=\"image\/*\" multiple \/>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/form><\/code><\/pre>\n
Som anv\u00e4ndare som ska v\u00e4lja flera filer m\u00e5ste vi \u00e4ndra JavaScript-koden som slingrar genom varje fil och bygger en matris av den.<\/p>\n
custom.js<\/strong><\/p>\n
jQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0$('body').on('change', '#file', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$this = $(this);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0file_obj = $this.prop('files');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data = new FormData();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for(i=0; i<file_obj.length; i++) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('file[]', file_obj[i]);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0form_data.append('action', 'file_upload');\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.ajax({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: aw.ajaxurl,\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\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\u00a0$this.val('');\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0alert('File(s) uploaded successfully.');\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
Och slutligen, i Ajax \u00e5teruppringningsfunktion, slingrar vi igenom filmatrisen och laddar upp varje fil p\u00e5 en server.<\/p>\n
function file_upload_callback() {\n\u00a0\u00a0\u00a0\u00a0$arr_img_ext = array('image\/png', 'image\/jpeg', 'image\/jpg', 'image\/gif');\n\u00a0\n\u00a0\u00a0\u00a0\u00a0for($i = 0; $i < count($_FILES['file']['name']); $i++) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (in_array($_FILES['file']['type'][$i], $arr_img_ext)) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$upload = wp_upload_bits($_FILES['file']['name'][$i], null, file_get_contents($_FILES['file']['tmp_name'][$i]));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/$upload['url'] will gives you uploaded file path\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0wp_die();\n}<\/code><\/pre>\n
Jag hoppas att du fick veta om Ajax-fil\u00f6verf\u00f6ringen i WordPress. Jag skulle vilja h\u00f6ra dina tankar och f\u00f6rslag i kommentarsektionen nedan.<\/p>\n
relaterade artiklar<\/h4>\n