Ajax-tiedostojen lataamisen integrointi WordPressiin
Haluatko toteuttaa Ajax-tiedostojen lataamisen WordPressissä? Joskus sinun on suoritettava tehtävä, joka lähettää tiedoston Ajaxin kautta. Tässä artikkelissa tutkitaan, miten Ajax-tiedosto ladataan WordPressissä.
Etuna tiedostojen lataamisesta Ajaxin kautta on, että se vähentää palvelimesi kuormitusta. Sivusi ei lataudu uudelleen, mikä säästää ylimääräisiä puheluja palvelimelle ja siten kaistanleveyden. Se lisää myös paremman käyttökokemuksen verkkosivustollasi.
Normaalisti työskennellessämme Ajaxin kanssa soitamme URL-osoitteeseen ja välitämme tietoja määritettyyn URL-osoitteeseen tai haemme tietoja siitä. WordPressillä on hieman erilainen tapa suorittaa Ajax-operaatioita. WordPressissä soitamme URL-osoitteelle, mutta koodi, jonka kirjoitamme tietojen käsittelemiseksi, menee toimintoon. Tämän jälkeen tämän toiminnon on kartoitettava Ajax-parametreissa välitetyllä ‘toiminta’ -arvolla. Hämmentynyt? Katsotaanpa se toiminnassa.
Ajax-tiedoston lataus WordPressissä
Aloittamiseen tarvitaan lomake, jossa on syötetty tiedosto. Annamme Ajax-puhelun tiedoston valinnasta ja lähetämme tiedoston palvelimelle. Luo lomake lisäämällä alla oleva HTML-koodi sivumalliin.
<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>Seuraavaksi sinun on annettava Ajax-kutsu tiedoston syötteen muutostapahtumalle. Kun välitämme tiedostosisältöä Ajaxille, koodisi on hieman erilainen kuin tavallinen WordPress Ajaxin jQuery-koodi .
Sisällytä JS-tiedosto WordPressiin
Sisällytetään ensin JS-tiedosto WordPress-ympäristöön. Tämä koodi menee functions.phptiedostoon tai sivustokohtaiseen laajennukseen.
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' );Lähetä tiedosto palvelimelle
Olet valmis lomakkeen ja JS-tiedoston kanssa. Lisää nyt alla oleva koodi JS-tiedostoon, joka lähettää tiedostosisällön palvelinpuolelle Ajaxin kautta.
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.');
}
});
});
});Tärkeä osa yllä olevaa koodia on, että liitämme toiminnon ‘tiedosto_lataus’ muotoon_tiedot -objektiin. Käytämme tätä tiedostotiedosto-toimintoa jatkaaksemme lomaketietoja.
Vuonna functions.php, kartta tämän toiminnan kanssa Ajax seuraavasti:
add_action( 'wp_ajax_file_upload', 'file_upload_callback' );
add_action( 'wp_ajax_nopriv_file_upload', 'file_upload_callback' );Jos kirjoitat tätä koodia laajennuksessa, sinun ei tarvitse kirjoittaa toista lausetta. Tässä ‘wp ajax_’ ja ‘wp_ajax_nopriv ‘ lisätään toimintoarvo, joka on ‘file_upload’. Toinen parametri ‘file_upload_callback’ on soittomenetelmä, jolla on todellinen koodi tiedostojen lataamista varten.
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();
}Käytän wp_upload_bits- menetelmää tiedoston lataamiseen palvelimelle. Tämä menetelmä tallentaa tiedoston suoraan wp-content / uploads-hakemistoon.
Mene eteenpäin ja yritä ladata tiedosto. Tiedostosi tulisi ladata wp-content / uploads / kansioon. Huomaa, että löydät tiedostosi kuluvan kuukauden lataushakemistoon.
Lataa useita tiedostoja Ajaxin avulla WordPressissä
Toistaiseksi olemme keskustelleet yhden tiedoston lataamisesta Ajaxin kautta. Saattaa olla tilanne, kun haluat ladata useita tiedostoja Ajaxilla. Katsotaanpa, miten se saavutetaan.
Jos haluat ladata useita tiedostoja, sinun on tehtävä pieniä muutoksia yllä olevaan HTML-, JS- ja PHP-koodiin.
HTML tarjoaa ‘useita’ -attribuutin, jonka avulla käyttäjä voi valita useita tiedostoja syötetystä tiedostosta.
HTML-koodi
<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>Käyttäjänä, joka aikoo valita useita tiedostoja, meidän on vaihdettava JavaScript-koodi, joka silmukkaa jokaista tiedostoa ja rakentaa siitä taulukon.
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 lopuksi Ajax-soittopyynnössä käymme läpi tiedostoryhmän ja lähetämme jokaisen tiedoston palvelimelle.
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();
}Toivon, että sait tietää Ajax-tiedostojen lataamisesta WordPressissä. Haluaisin kuulla ajatuksesi ja ehdotuksesi alla olevassa kommenttiosassa.