Ajaxi failide üleslaadimine PHP ja jQuery abil
Kas otsite failide üleslaadimist PHP-s Ajaxi abil? Ajaxi kaudu faili üleslaadimine on tänapäeval trendikas. See lisab veebisaidil parema kasutuskogemuse. Selles artiklis näitan teile, kuidas faile Ajaxi kaudu PHP ja jQuery abil üles laadida.
Failide / piltide üleslaadimine on arendajatele tavaline ülesanne. On mitmeid juhtumeid, kus peate üles laadima failide üleslaadimise funktsionaalsuse. Mõned levinumad näited on profiilifotode, liuguripiltide, iseloomustuste, portfellide, karussellide jms üleslaadimine.
Miks on vaja Ajaxi abil faili üles laadida?
Ajaxi kaudu failide üleslaadimise peamine põhjus on see, et te ei soovi lehte pärast failide üleslaadimist värskendada. Ja see on ilmne. Kui pole vajadust, pole mõtet tervet lehte laadida. Kui laadite lehte pärast faili üleslaadimist, lisate serverisse lisakoormust.
Ajaxi abil failide üleslaadimine vähendab serveri tarbetut koormust ja annab veebisaidil parema kasutuskogemuse.
Nii et alustame pikema viivituseta koodiga.
Failide üleslaadimine Ajaxi abil koos PHP ja jQueryga
Alustuseks loome vormi, millel on failisisestus ja nuppu Esita. Lisage oma faili öelge järgmine HTML-kood index.php.
<form>
<p><input type="file" name="file" class="file" required></p>
<input type="submit" name="submit" class="submit" value="Submit">
</form>Kuna kavatsen kirjutada natuke JavaScripti koodi, lisasin vastavalt faili sisestamise ja esitamise nupule klassid ‘fail’ ja ‘esita’. Need klassid toimivad vormielementide identifikaatorina.
JavaScripti kood
Järgmisena kirjutage JavaScripti kood, mis kutsub Ajaxi kõne serveripoolele ja haldab vastust.
<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>Ülaltoodud JavaScripti koodis saadan faili sisu ajax.phpfaili ja töötlen ka vastusega.
PHP kood
Selles etapis oleme faili sisu serveripoolele saatnud. Nüüd looge fail, ajax.phpkuhu peame kirjutama PHP-koodi, mis laadib failid serverisse üles.
ajax.php
<?php
if (!file_exists('uploads')) {
mkdir('uploads', 0777);
}
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'. $_FILES['file']['name']);
echo "success";
die();Ülaltoodud PHP-kood kontrollib kõigepealt kataloogi ‘uploads’. Kui seda kataloogi pole, loob see selle ja laadib faili üles sellesse kausta.
Loodan, et saate nüüd Ajaxi abil failide üleslaadimise oma veebisaidil hõlpsasti rakendada. Tahaksin kuulda teie mõtteid allpool olevast kommentaaride jaotisest.