Hur man integrerar Ajax-filöverföring i WordPress
Vill du implementera Ajax-filöverföring i WordPress? Ibland måste du utföra en uppgift som laddar upp en fil via Ajax. I den här artikeln studerar vi hur man gör Ajax-filöverföring i WordPress.
En fördel med att ladda upp filer via Ajax är att det minskar din serverbelastning. Din sida laddas inte om vilket sparar extra samtal till en server och så bandbredden. Det ger också en bättre användarupplevelse på din webbplats.
Normalt när vi arbetar med Ajax ringer vi till URL och skickar data till eller får data från den angivna URL: n. WordPress har ett något annat sätt att utföra Ajax-operationer. I WordPress ringer vi till webbadressen men koden vi skriver för att bearbeta data kommer att ingå i funktionen. Då måste denna funktion kartläggas med ‘action’ -värdet skickat i Ajax-parametrar. Förvirrad? Låt oss se det i aktion.
Ajax-filöverföring i WordPress
För att komma igång behöver du ett formulär med filinmatningen. Vi ger ett Ajax-samtal om valet av en fil och laddar upp filen till en server. För att skapa ett formulär, lägg till nedanstående HTML i din sidmall.
<form class="fileUpload" enctype="multipart/form-data">
<div class="form-group">
<label><?php _e('Choose File:'); ?></label>
<input type="file" id="file" accept="image/*" />
</div>
</form>Därefter måste du ringa ett Ajax-samtal om ändringshändelsen för filinmatning. När vi skickar ett filinnehåll till Ajax kommer din kod att vara något annorlunda jämfört med vanlig jQuery-kod för WordPress Ajax.
Inkludera JS-fil i WordPress
Låt oss först inkludera JS-filen i en WordPress-miljö. Den här koden går in i functions.phpfilen eller i ett platsspecifikt plugin.
function aw_scripts() {
// Register the script
wp_register_script( 'aw-custom', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), '1.1', true );
// Localize the script with new data
$script_data_array = array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
);
wp_localize_script( 'aw-custom', 'aw', $script_data_array );
// Enqueued script with localized data.
wp_enqueue_script( 'aw-custom' );
}
add_action( 'wp_enqueue_scripts', 'aw_scripts' );Ladda upp fil på servern
Du är redo med formuläret och JS-filen. Lägg nu till koden nedan i JS-filen som skickar filinnehåll till serversidan via Ajax.
custom.js
jQuery(function($) {
$('body').on('change', '#file', function() {
$this = $(this);
file_data = $(this).prop('files')[0];
form_data = new FormData();
form_data.append('file', file_data);
form_data.append('action', 'file_upload');
$.ajax({
url: aw.ajaxurl,
type: 'POST',
contentType: false,
processData: false,
data: form_data,
success: function (response) {
$this.val('');
alert('File uploaded successfully.');
}
});
});
});Den viktiga delen av koden ovan är att vi lägger till en åtgärd ‘file_upload’ till form_data-objektet. Vi kommer att använda denna ‘file_upload’ -åtgärd för att fortsätta med formulärdata.
I functions.php, karta denna åtgärd med Ajax på följande sätt:
add_action( 'wp_ajax_file_upload', 'file_upload_callback' );
add_action( 'wp_ajax_nopriv_file_upload', 'file_upload_callback' );Om du skriver den här koden i ett plugin behöver du inte skriva ett andra uttalande. Här till ‘wp ajax_’ och ‘wp_ajax_nopriv ‘ lägger vi till åtgärdsvärdet som är ‘file_upload’. Den andra parametern ‘file_upload_callback’ är återuppringningsmetoden som har den faktiska koden för filöverföring.
function file_upload_callback() {
$arr_img_ext = array('image/png', 'image/jpeg', 'image/jpg', 'image/gif');
if (in_array($_FILES['file']['type'], $arr_img_ext)) {
$upload = wp_upload_bits($_FILES["file"]["name"], null, file_get_contents($_FILES["file"]["tmp_name"]));
//$upload['url'] will gives you uploaded file path
}
wp_die();
}Jag använder en wp_upload_bits- metod för att ladda upp filen på en server. Denna metod lagrar en fil direkt i wp-content / uploads-katalogen.
Fortsätt och försök ladda upp en fil. Din fil bör laddas upp till wp-content / uppladdningar / mappen. Observera att du hittar din fil i den aktuella månadskatalogen med uppladdningskatalogen.
Ladda upp flera filer med Ajax i WordPress
Hittills har vi diskuterat uppladdning av en enda fil via Ajax. Det kan finnas en situation när du vill ladda upp flera filer med Ajax. Låt oss se hur man uppnår det.
För att ladda upp flera filer måste du göra små förändringar i ovanstående HTML-, JS- och PHP-kod.
HTML tillhandahåller ett "flera" attribut som tillåter en användare att välja flera filer på filinmatning.
HTML-kod
<form class="fileUpload" enctype="multipart/form-data">
<div class="form-group">
<label><?php _e('Choose File:'); ?></label>
<input type="file" id="file" accept="image/*" multiple />
</div>
</form>Som användare som ska välja flera filer måste vi ändra JavaScript-koden som slingrar genom varje fil och bygger en matris av den.
custom.js
jQuery(function($) {
$('body').on('change', '#file', function() {
$this = $(this);
file_obj = $this.prop('files');
form_data = new FormData();
for(i=0; i<file_obj.length; i++) {
form_data.append('file[]', file_obj[i]);
}
form_data.append('action', 'file_upload');
$.ajax({
url: aw.ajaxurl,
type: 'POST',
contentType: false,
processData: false,
data: form_data,
success: function (response) {
$this.val('');
alert('File(s) uploaded successfully.');
}
});
});
});Och slutligen, i Ajax återuppringningsfunktion, slingrar vi igenom filmatrisen och laddar upp varje fil på en server.
function file_upload_callback() {
$arr_img_ext = array('image/png', 'image/jpeg', 'image/jpg', 'image/gif');
for($i = 0; $i < count($_FILES['file']['name']); $i++) {
if (in_array($_FILES['file']['type'][$i], $arr_img_ext)) {
$upload = wp_upload_bits($_FILES['file']['name'][$i], null, file_get_contents($_FILES['file']['tmp_name'][$i]));
//$upload['url'] will gives you uploaded file path
}
}
wp_die();
}Jag hoppas att du fick veta om Ajax-filöverföringen i WordPress. Jag skulle vilja höra dina tankar och förslag i kommentarsektionen nedan.
relaterade artiklar
- Hur man laddar WordPress-inlägg med AJAX
- Hur man använder jQuery Ajax i WordPress
- Dra och släpp filöverföring med JavaScript och PHP