Ajax-tiedostojen lataus PHP: llä ja jQueryllä
Etsitkö tiedostojen lataamista käyttämällä Ajaxia PHP: ssä? Tiedoston lataaminen Ajaxin kautta on nykyään trendi. Se lisää paremman käyttökokemuksen verkkosivustolla. Tässä artikkelissa näytän, kuinka tiedostoja ladataan Ajaxin kautta PHP: n ja jQueryn avulla.
Tiedostojen / kuvien lataaminen on säännöllinen tehtävä kehittäjille. On useita tapauksia, joissa sinun on rakennettava tiedostojen lataustoiminto. Joitakin yleisiä esimerkkejä ovat profiilikuvien, liukusäätimien kuvien, suositusten, salkkujen, karusellien jne. Lataaminen.
Miksi tiedosto on ladattava Ajaxilla?
Tärkein syy tiedostojen lataamiseen Ajaxin kautta on, että et halua päivittää sivua tiedostojen lataamisen jälkeen. Ja se on ilmeistä. Koko sivun lataaminen ei ole järkevää, jos se ei ole tarpeen. Jos lataat sivua tiedostojen lataamisen jälkeen, lisäät ylimääräistä kuormaa palvelimelle.
Tiedostojen lataaminen Ajaxilla vähentää palvelimen tarpeetonta kuormitusta ja antaa paremman käyttökokemuksen verkkosivustolla.
Joten aloitamme koodista ilman viivytyksiä.
Tiedostojen lataus Ajaxilla PHP: n ja jQueryn avulla
Aloitetaan luomalla lomake, jossa on tiedostosyöttö ja Lähetä-painike. Lisää alla oleva HTML-koodi tiedostoosi sano index.php.
<form>
<p><input type="file" name="file" class="file" required></p>
<input type="submit" name="submit" class="submit" value="Submit">
</form>Kun aion kirjoittaa vähän JavaScript-koodia, lisäsin luokan ‘tiedosto’ ja ‘lähetä’ vastaavaan tiedostopainikkeeseen. Nämä luokat toimivat tunnisteina lomake-elementeille.
JavaScript-koodi
Kirjoita seuraavaksi JavaScript-koodi, joka antaa Ajax-puhelun palvelinpuolelle ja käsittelee vastauksen.
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javascript">
$(function() {
$('.submit').on('click', function() {
var file_data = $('.file').prop('files')[0];
if(file_data != undefined) {
var form_data = new FormData();
form_data.append('file', file_data);
$.ajax({
type: 'POST',
url: 'ajax.php',
contentType: false,
processData: false,
data: form_data,
success:function(response) {
if(response == 'success') {
alert('File uploaded successfully.');
} else {
alert('Something went wrong. Please try again.');
}
$('.file').val('');
}
});
}
return false;
});
});
</script>Yllä olevassa JavaScript-koodissa lähetän tiedostosisältöä ajax.phptiedostoon ja käsittelen vastausta.
PHP-koodi
Tässä vaiheessa tiedostojen sisältö lähetetään palvelinpuolelle. Luo nyt tiedosto, ajax.phpjohon meidän on kirjoitettava PHP-koodi, joka lataa tiedostot palvelimelle.
ajax.php
<?php
if (!file_exists('uploads')) {
mkdir('uploads', 0777);
}
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'. $_FILES['file']['name']);
echo "success";
die();Yllä oleva PHP-koodi tarkistaa ensin ‘uploads’ -hakemiston. Jos tätä hakemistoa ei ole, se luo sen ja lähettää tiedoston tähän kansioon.
Toivon, että voit nyt helposti toteuttaa tiedostojen lataamisen verkkosivustollasi Ajaxin avulla. Haluaisin kuulla ajatuksesi alla olevassa kommenttiosassa.