...
✅ WEB ja WordPressi uudised, teemad, pistikprogrammid. Siin jagame näpunäiteid ja parimaid veebisaidi lahendusi.

Pukseerige faili üleslaadimine JavaScripti ja PHP abil

14

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.

Pukseerige faili üleslaadimine JavaScripti ja PHP abil

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.jsfailis. Enne seda lisame style.cssfaili 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.jsfaili 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.phpja 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.

seotud artiklid

See veebisait kasutab teie kasutuskogemuse parandamiseks küpsiseid. Eeldame, et olete sellega rahul, kuid saate soovi korral loobuda. Nõustu Loe rohkem