Pukseerige faili üleslaadimine JavaScripti ja PHP abil
Kas soovite oma veebisaidile integreerida failide üleslaadimise funktsiooni? See funktsioon on kasutajasõbralik ja vähendab kasutajate klikke. Selles artiklis uurime, kuidas lisada JavaScripti ja PHP abil failide üleslaadimise funktsioone. Faili sirvimiseks on teil ka failisisestus.
Lõplik faili üleslaadimise kasutajaliides näeb välja nagu allolev pilt.
Miks on vaja failide üleslaadimise funktsiooni lohistada?
Soovime veebisaidil alati paremat kasutuskogemust saada. Failide üleslaadimiseks lohistamisfunktsiooni andmine on teie kasutajatele hõlpsasti kasutatav valik. Paljud populaarsed veebisaidid nagu Facebook, WordPress kasutavad seda funktsiooni juba praegu.
See funktsioon näeb parem välja, võrreldes tavapärase failide üleslaadimise viisiga. See parandab ka kasutajakogemust, kuna kasutaja lihtsalt lohistab faili ja laadib selle üles serverisse.
Selles õpetuses anname kasutajatele mõlemad võimalused. Faili saab üles laadida kas lohistades või sisestades faili.
Kasutan Ajaxi failide serverisse üleslaadimiseks. Ajaxi kasutades ei laadita teie lehte. See lihtsalt saadab faili serverisse taustal.
Integreeri faili üleslaadija
Alustamiseks kirjutame kõigepealt HTML-koodi. Järgmisel HTML-koodil on failide üleslaadimiseks konteiner. See sisaldab ka CSS- ja JS-faile, mille ma järgmiste toimingutega loon.
<link rel="stylesheet" href="style.css">
<div id="drop_file_zone" ondrop="upload_file(event)" ondragover="return false">
<div id="drag_upload_file">
<p>Drop file here</p>
<p>or</p>
<p><input type="button" value="Select File" onclick="file_explorer();"></p>
<input type="file" id="selectfile">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="custom.js"></script>
Ülaltoodud HTML-is kasutasin kahte sündmust – ondrop ja onclick. Ma määratlen nende meetodid custom.js
failis. Enne seda lisame style.css
faili CSS-koodi .
#drop_file_zone {
background-color: #EEE;
border: #999 5px dashed;
width: 290px;
height: 200px;
padding: 8px;
font-size: 18px;
}
#drag_upload_file {
width:50%;
margin:0 auto;
}
#drag_upload_file p {
text-align: center;
}
#drag_upload_file #selectfile {
display: none;
}
Meie eesmärk on, kui kasutaja loobub failist või sirvib seda, peaks fail üles laadima serverisse. Selleks peate kirjutama JavaScripti koodi, mis võtab faili kliendipoolelt ja saatma selle serverisse.
Selle voo käsitsemiseks lisage custom.js
faili allolev kood .
var fileobj;
function upload_file(e) {
e.preventDefault();
fileobj = e.dataTransfer.files[0];
ajax_file_upload(fileobj);
}
function file_explorer() {
document.getElementById('selectfile').click();
document.getElementById('selectfile').onchange = function() {
fileobj = document.getElementById('selectfile').files[0];
ajax_file_upload(fileobj);
};
}
function ajax_file_upload(file_obj) {
if(file_obj != undefined) {
var form_data = new FormData();
form_data.append('file', file_obj);
$.ajax({
type: 'POST',
url: 'ajax.php',
contentType: false,
processData: false,
data: form_data,
success:function(response) {
alert(response);
$('#selectfile').val('');
}
});
}
}
Eespool kirjutatud JavaScripti kood tuvastab automaatselt faili üleslaadimiseks valitud kasutajad. Lõpuks ajax_file_upload()
võtab funktsioon faili objekti ja edastab selle Ajaxi faili.
Laadige fail serverisse üles
Ajaxi faili kirjutan tegeliku koodi, mis faili serverisse üles laadib. Looge fail nimega ajax.php
ja lisage sellesse allolev kood.
<?php
$arr_file_types = ['image/png', 'image/gif', 'image/jpg', 'image/jpeg'];
if (!(in_array($_FILES['file']['type'], $arr_file_types))) {
echo "false";
return;
}
if (!file_exists('uploads')) {
mkdir('uploads', 0777);
}
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'. time(). '_'. $_FILES['file']['name']);
echo "File uploaded successfully.";
See PHP-kood kontrollib kõigepealt, kas serveris on kaust nimega ‘uploads’. Kui ei, siis loob see kataloogi "üleslaadimised" ja teisaldab faili selles sees. Saate seda kataloogitee muuta vastavalt oma nõudele.
Loodan, et saate aru, kuidas lisada faili üleslaadimise PHP ja JavaScripti abil. Andke mulle teada oma mõtetest ja ettepanekutest allpool olevas kommentaaris.