Vedä ja pudota tiedostolataus käyttämällä JavaScriptiä ja PHP: tä
Aiotko integroida vedä ja pudota -toiminnon tiedostojen latausominaisuuden verkkosivustollesi? Tämä ominaisuus on käyttäjäystävällinen ja vähentää käyttäjien napsautuksia. Tässä artikkelissa tutkitaan kuinka lisätä toimintoja vetämällä ja pudottamalla tiedostojen lataamiseen JavaScriptin ja PHP: n avulla. Sinulla on myös tiedostosyöttö tiedoston selaamiseksi.
Lopullinen tiedostojen lataamisen käyttöliittymä näyttää alla olevalta kuvalta.
Miksi tarvitset vedä ja pudota -toiminnon?
Haluamme aina saada paremman käyttökokemuksen verkkosivustolla. Vedä ja pudota -ominaisuuden antaminen tiedostojen lataamiseksi on helppokäyttöinen vaihtoehto käyttäjillesi. Monet suosituista verkkosivustoista, kuten Facebook, WordPress, käyttävät jo tätä ominaisuutta.
Tämä ominaisuus näyttää paremmalta verrattuna perinteiseen tiedostojen lataustapaan. Se parantaa myös käyttökokemusta, kun käyttäjä yksinkertaisesti vetää tiedoston ja lataa sen palvelimelle.
Tässä opetusohjelmassa annamme molemmat vaihtoehdot käyttäjille. Tiedosto voidaan ladata joko vetämällä ja pudottamalla tai tiedoston syötteen kautta.
Aion käyttää Ajaxia tiedostojen lataamiseen palvelinpuolelle. Ajaxia käyttämällä sivua ei ladata. Se yksinkertaisesti lähettää tiedoston palvelimelle taustalla.
Integroi vedä ja pudota -toiminto
Aloitetaan kirjoittamalla ensin HTML-koodi. Seuraavassa HTML-koodissa on säilö tiedostojen lataamista varten. Se sisältää myös CSS- ja JS-tiedoston, jotka luon seuraavissa vaiheissa.
<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>Yllä olevassa HTML: ssä käytin kahta tapahtumaa – ondrop ja onclick. Määritän heidän menetelmänsä custom.jstiedostossa. Ennen sitä lisätään CSS-koodi style.csstiedostoon.
#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;
}Tavoitteenamme on, että kun käyttäjä pudottaa tai selaa tiedostoa, tiedoston pitäisi ladata palvelimelle. Tätä varten sinun on kirjoitettava JavaScript-koodi, joka vie tiedoston asiakaspuolelta ja lähettää sen palvelimelle.
Voit käsitellä tätä kulkua lisäämällä alla olevan koodin custom.jstiedostoon.
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('');
}
});
}
}Yllä kirjoitettu JavaScript-koodi tunnistaa automaattisesti käyttäjän ladatut vaihtoehdot. Lopuksi toiminto ajax_file_upload()vie tiedosto-objektin ja välittää sen Ajax-tiedostoon.
Lähetä tiedosto palvelimelle
Kirjoitan Ajax-tiedostoon varsinaisen koodin, joka lähettää tiedoston palvelimelle. Luo tiedosto nimeltä nimeltä ajax.phpja lisää siihen alla oleva koodi.
<?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.";Tämä PHP-koodi tarkistaa ensin, onko palvelimella kansio nimeltä uploads. Jos ei, se luo ‘uploads’ -hakemiston ja siirtää tiedoston sen sisällä. Voit säätää tätä hakemistopolkua vaatimuksesi mukaan.
Toivon, että ymmärrät kuinka lisätä vedä ja pudota -tiedostolataus PHP: llä ja JavaScriptillä. Kerro minulle ajatuksesi ja ehdotuksesi alla olevassa kommentissa.