Ajaxi faili üleslaadimise integreerimine WordPressi
Kas soovite rakendada AjaP faili üleslaadimist WordPressis? Mõnikord peate täitma toimingu, mis laadib faili üles Ajaxi kaudu. Selles artiklis uurime, kuidas Ajaxi faile üles laadida WordPressis.
Ajaxi kaudu failide üleslaadimise eelis on see, et see vähendab teie serveri koormust. Teie lehte ei laadita uuesti, mis salvestab serverisse lisakõnesid ja seega ka ribalaiust. Samuti lisab see teie veebisaidil parema kasutuskogemuse.
Tavaliselt helistame Ajaxiga töötades URL-ile ja edastame andmeid või hankime andmeid määratud URL-ile. WordPressil on Ajaxi toimingute tegemiseks veidi erinev viis. WordPressis helistame URL-ile, kuid andmete töötlemiseks kirjutatav kood läheb funktsiooni. Seejärel peab see funktsioon olema kaardistatud Ajaxi parameetrites edastatud ‘action’ väärtusega. Segaduses? Vaatame seda tegevuses.
Ajaxi faili üleslaadimine WordPressis
Alustamiseks vajate failisisestusega vormi. Helistame faili valimisel Ajaxi kõne ja laadime faili üles serverisse. Vormi loomiseks lisage allolev HTML oma lehemalli.
<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>Järgmisena peate faili sisendi muutmise korral ajaxi kõne tegema. Kuna edastame faili sisu Ajaxile, on teie kood WordPress Ajaxi tavalise jQuery koodiga võrreldes veidi erinev .
Kaasa JS-fail WordPressi
Lisame kõigepealt JS-faili WordPressi keskkonda. See kood läheb functions.phpfaili sisse või saidipõhisse pistikprogrammi.
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' );Laadige fail serverisse üles
Olete vormi ja JS-failiga valmis. Nüüd lisage JS-faili allpool olev kood, mis saadab faili sisu Ajaxi kaudu serveri poolele.
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.');
}
});
});
});Ülaltoodud koodi oluline osa on see, et lisame objektile form_data toimingu ‘file_upload’. Vormiandmete jätkamiseks kasutame seda toimingut „file_upload".
Aastal functions.php, kaardistada tegevus koos Ajax järgmiselt:
add_action( 'wp_ajax_file_upload', 'file_upload_callback' );
add_action( 'wp_ajax_nopriv_file_upload', 'file_upload_callback' );Kui kirjutate selle koodi pistikprogrammis, ei pea te teist avaldust kirjutama. Siin lisame ‘wp ajax_’ ja ‘wp_ajax_nopriv ‘ juurde toimingu väärtuse, mis on ‘file_upload’. Teine parameeter ‘file_upload_callback’ on tagasihelistusmeetod, millel on failide üleslaadimiseks tegelik kood.
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();
}Kasutan faili serverisse üleslaadimiseks meetodit wp_upload_bits. See meetod salvestab faili otse kataloogi wp-content / uploads.
Proovige faili üles laadida. Teie fail tuleks üles laadida kausta wp-content / uploads /. Pange tähele, et leiate oma faili üleslaadimiste kataloogi praeguse kuu kausta.
Laadige mitu faili üles WordPressi Ajaxi abil
Siiani oleme arutanud ühe faili üleslaadimist Ajaxi kaudu. Võib tekkida olukord, kui soovite Ajaxi abil mitu faili üles laadida. Vaatame, kuidas seda saavutada.
Mitme faili üleslaadimiseks peate ülaltoodud HTML-, JS- ja PHP-koodis veidi muutma.
HTML pakub atribuuti ‘mitu’, mis võimaldab kasutajal failisisestuses valida mitu faili.
HTML-kood
<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>Kasutajana, kes valib mitu faili, peame muutma JavaScripti koodi, mis viib läbi iga faili ja loob sellest massiivi.
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.');
}
});
});
});Ja lõpuks, Ajaxi tagasihelistamisfunktsioonis uurime failimassiivi ja laadime iga faili serverisse üles.
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();
}Loodan, et saite teada AjaPX-i failide üleslaadimisest WordPressis. Tahaksin kuulda teie mõtteid ja ettepanekuid allpool olevas kommentaaride jaotises.