Skip to content

Kõik WordPressist, veebiarendusest — ja mitte ainult

📤 Faili üleslaadimine lohistamisega, kasutades Dropzone.js ja PHP
Veebiarendus
8 min1,572 sõna

📤 Faili üleslaadimine lohistamisega, kasutades Dropzone.js ja PHP

Kasutajad eeldavad, et nad saavad veebisaidile faile üles laadida lihtsalt neid brauseriaknasse lohistades. Nupp „Vali fail" ja failihaldur tunduvad juba tarbetute sammudena. Kuid lohistamise funktsionaalsuse nullist kirjutamine JavaScriptis tähendab mitusada rida koodi, edenemisribasid, eelvaateid ja veakäsitlust. Õnneks on olemas valmisteek, mis katab kõik selle kohe karbist välja võttes.

Dropzone.js on avatud lähtekoodiga JavaScripti teek failide lohistamisega üleslaadimiseks. See näitab piltide eelvaateid, edenemisriba ega vaja jQueryt. See töötab mis tahes serveripoolse keelega: PHP, Node.js, Python. Sellest juhendist leiate täieliku tsükli paigaldamisest kuni tootmisseadistuseni kuues sammus.

💡 Kiirülevaade:

  • Mida see teeb: Dropzone.js teek muudab mis tahes HTML-elemendi failide lohistamise tsooniks koos AJAX-i teel serverisse saatmisega.
  • Kuidas paigaldada: CDN-i link (unpkg või jsDelivr) või npm-i pakett; mõlemad variandid on kaetud esimeses sammus.
  • Kuidas serveris käsitleda: PHP skript võtab faili vastu $_FILES kaudu, täpselt nagu tavalise vormi puhul; kolmas samm sisaldab kasutusvalmis koodi.
  • Kus rakendada: manusega kontaktivormid, avataride üleslaadimised, piltide hulgilaadimine WordPressi galeriisse.

1. Samm: Dropzone.js paigaldamine

Kiireim viis on lisada teek CDN-i kaudu. Lisage see silt oma lehe <head> sektsiooni:

1<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>

CSS-fail lisatakse eraldi:

1<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" />

Kui kasutate komplekteerijat, paigaldage npm-i kaudu:

1npm install dropzone

Ja importige see oma JS-failis:

1import Dropzone from "dropzone";

Pange tähele, et versioon 5.9 on 2026. aasta alguse seisuga viimane stabiilne väljalase. Versioon kuus on beetastaatuses ja seda ei soovitata veel tootmiskeskkonda. Projekti repositoorium asub nüüd aadressil github.com/dropzone/dropzone (varem enyo/dropzone).

2. Samm: HTML-i põhimärgendus ja lähtestamine

Looge vorm klassiga dropzone. Dropzone tuvastab selle automaatselt ja muudab selle lohistamise tsooniks:

1<form action="/upload.php"
2      class="dropzone"
3      id="my-dropzone"></form>

See ongi kõik. Kui kasutaja lohistab faili sellesse vormi, saadab teek selle AJAX-päringu kaudu action atribuudis määratud URL-ile. Serveri poolel jõuab fail kohale muutujas $_FILES['file'], täpselt nagu tavalise <input type="file"> kaudu esitamise korral.

Arendaja kirjutab koodi failide üleslaadimiseks

Kui vajad varuvarianti brauseritele, kus JavaScript ei tööta, lisa vormi tavaline väli:

1<form action="/upload.php" class="dropzone">
2  <input name="file" type="file" multiple />
3</form>

Nuppu „Choose file" kuvatakse ainult siis, kui JavaScript pole saadaval. Kui JS on lubatud, peidab Dropzone selle ja kuvab oma lohistamisala.

Samm 3: Failide käsitlemine serveris

PHP skript võtab üleslaadimisi vastu samamoodi nagu tavalise vormi puhul. Siin on minimaalne töötav versioon:

1<?php
2if (!empty($_FILES)) {
3    $uploadDir = __DIR__ . '/uploads/';
4 
5    if (!is_dir($uploadDir)) {
6        mkdir($uploadDir, 0755, true);
7    }
8 
9    $originalName = basename($_FILES['file']['name']);
10    $targetPath   = $uploadDir . time() . '_' . $originalName;
11 
12    if (move_uploaded_file($_FILES['file']['tmp_name'], $targetPath)) {
13        http_response_code(200);
14        echo json_encode(['status' => 'ok', 'file' => $targetPath]);
15    } else {
16        http_response_code(500);
17        echo json_encode(['status' => 'error', 'message' => 'Failed to save file']);
18    }
19}

Mis siin toimub:

  • Skript loob kausta uploads/, kui seda pole olemas.
  • Algsele failinimele lisatakse time(), mis väldib nimekonflikte.
  • basename() eemaldab kõik tee läbimise ründed (katsed kaustast väljuda ../ abil).
  • Dropzone ootab serverilt HTTP 200 vastust; vastasel juhul loeb see üleslaadimise ebaõnnestunuks ja kuvab veateate.

Tootmiskeskkonna jaoks lisa laiendi ja MIME tüübi valideerimine:

1$allowed = ['jpg', 'jpeg', 'png', 'gif', 'pdf', 'zip'];
2$ext = strtolower(pathinfo($originalName, PATHINFO_EXTENSION));
3 
4if (!in_array($ext, $allowed)) {
5    http_response_code(400);
6    echo json_encode(['status' => 'error', 'message' => 'Invalid file type']);
7    exit;
8}

Samm 4: Failide arvu, suuruse ja tüübi piiramine

Kolm kõige sagedamini vajatavat Dropzone'i seadistust konfigureeritakse JavaScripti konfiguratsiooni kaudu:

1Dropzone.options.myDropzone = {
2  maxFiles: 10,
3  maxFilesize: 5,          // In megabytes
4  acceptedFiles: 'image/*,.pdf',
5  dictDefaultMessage: 'Drag files here or click to select'
6};

Valikute selgitus:

  • maxFiles: mitu faili saab kasutaja korraga üles laadida. Vaikimisi piirangut pole; näites on lubatud kuni 10.
  • maxFilesize: ühe faili maksimaalne suurus megabaitides. Väärtus 5 tähendab 5 MB. Varasemates teegi versioonides oli vaikeväärtus 256 MB; praeguses 5.x versioonis on see samuti 256, seega määra selgelt oma piirang.
  • acceptedFiles: komaga eraldatud MIME tüüpide string. Muster image/* lubab kõiki pilte, .pdf lisab PDF-i nimekirja. Vaata täielikku MIME tüüpide nimekirja Dropzone'i dokumentatsioonist.
  • dictDefaultMessage: tekst, mida kasutaja näeb tühjas üleslaadimisalas (selles näites inglise keeles).

Võti myDropzone kirjes Dropzone.options.myDropzone on HTML atribuudi id="my-dropzone" camelCase-versioon. Sidekriipsud jäetakse välja ja iga järgnev sõna kirjutatakse suure algustähega: my-dropzone → myDropzone, file-upload-area → fileUploadArea.

Valikud resizeWidth ja resizeHeight võimaldavad pilte enne saatmist kliendi poolel väiksemaks muuta. See säästab kasutaja andmemahtu ja vähendab serveri koormust, eriti kui külastajad laadivad üles 10-15 MB suuruseid telefonifotosid. Määra mõlemad parameetrid koos:

1Dropzone.options.myDropzone = {
2  resizeWidth: 1200,
3  resizeHeight: 1200,
4  resizeQuality: 0.8,
5  resizeMethod: 'contain'
6};

Meetod contain mahutab pildi etteantud piiridesse ilma kärpimiseta, samas kui crop kärbib täpsete mõõtmeteni. Kvaliteet 0.8 on originaalist praktiliselt eristamatu, kuid vähendab faili suurust 4-7 korda. Oluline: suuruse muutmine töötab ainult pildifailidega; PDF-id ja arhiivid edastatakse muutmata kujul. Brauser teostab suuruse muutmise Canvas API kaudu, seega pole lisaraamatukogusid vaja.

Samm 5: Käsitsi faili esitamine

Vaikimisi saadab Dropzone faili serverisse kohe pärast selle lisamist. See ei ole alati mugav: mõnikord on vaja lasta kasutajal täita üleslaadimisala kõrval olevad vormiväljad ja esitada kõik ühe nupuga.

Keela automaatne üleslaadimine lipuga autoProcessQueue: false ja seo esitamine välise nupuga:

1Dropzone.options.myDropzone = {
2  autoProcessQueue: false,
3  maxFilesize: 5,
4  init: function () {
5    const myDropzone = this;
6    const submitBtn = document.querySelector('#btnUpload');
7 
8    submitBtn.addEventListener('click', function () {
9      if (myDropzone.getQueuedFiles().length === 0) {
10        alert('No files to upload');
11        return;
12      }
13      myDropzone.processQueue();
14    });
15 
16    this.on('success', function (file, response) {
17      console.log('File uploaded:', file.name);
18    });
19  }
20};

Võtmepunkt siin on processQueue() meetod. See käivitab kõigi järjekorda kogunenud failide esitamise. Sündmus success käivitub iga faili kohta eraldi, võimaldades liidest uuendada või salvestada üleslaaditud faili ID peidetud vormiväljale.

Samm 6: Täiendavate andmete saatmine koos failiga

Mõnikord on vaja üleslaadimisele lisada teenuseparameetreid: kasutaja ID, dokumendi staatus, valitud kategooria. Dropzone'il on selleks sündmus sending:

1Dropzone.options.myDropzone = {
2  init: function () {
3    this.on('sending', function (file, xhr, formData) {
4      formData.append('status', 'draft');
5      formData.append('user_id', currentUserId);
6    });
7 
8    this.on('success', function (file, responseText) {
9      console.log('Done:', responseText);
10    });
11  }
12};

Sündmus sending kutsutakse välja vahetult enne XMLHttpRequest saatmist. Kolmas argument formData on standardne FormData objekt, millele saad append() abil lisada mis tahes võtme-väärtuse paare. Serveri poolel loetakse neid parameetreid muutujatest $_POST['status'] ja $_POST['user_id'].

Praktiline stsenaarium: kasutaja valib Dropzone'i ala kõrval olevast rippmenüüst albumi ja albumi ID saadetakse koos iga failiga. Server sorteerib üleslaadimised kohe vastavatesse kaustadesse.

Turvalisus: kolm reeglit, mida ei tohi ignoreerida

Enne Dropzone'i tootmiskeskkonda paigaldamist kontrolli kolme asja.

Esiteks. Valideeri faili tüüpi ja suurust alati serveri poolel, isegi kui oled JS-is juba acceptedFiles ja maxFilesize seadistanud. Kliendipoolsed piirangud on minutiga brauseri konsooli kaudu välditavad. Serveripoolne filtreerimine on ainus tõeline kaitse.

Teiseks. Salvesta üleslaaditud failid väljapoole dokumendijuurt või kausta, kus skriptide käivitamine on keelatud. Näiteks selline struktuur:

1/public_html        ← document root ( index.php )
2/uploads            ← folder with uploaded files (outside web access)

Siis ei tööta faili otsene URL; brauser serveerib faili ainult läbi PHP vahendusskripti, mis kontrollib juurdepääsuõigusi.

Kolmandaks. Genereeri serveris unikaalsed failinimed. Ära usalda nime, mille klient saadab: see võib sisaldada ../, nullbaite või erimärke. basename() + time() + juhuslik sõne on miinimumtase.

Neljandaks. Kontrolli faili sisu, mitte ainult laiendit. Ründaja saab shell.php ümber nimetada photo.jpg-ks ja pathinfo() filtri niimoodi läbida. Usaldusväärne lähenemine: tuvasta tegelik MIME tüüp finfo_file() abil (sisseehitatud PHP Fileinfo moodul) ja võrdle seda lubatud nimekirjaga. Piltide puhul kontrolli lisaks, et getimagesize() tagastaks kehtivad mõõtmed; see filtreerib välja rikutud failid ja maskeeritud skriptid. Suure liiklusega projektide puhul kaalu üleslaadimiste suunamist eraldi mikroteenusesse pöördproksi taga, mis võtab voo vastu, skannib selle viirusetõrjega (näiteks ClamAV) ja alles seejärel edastab selle põhirakendusele.

Ülaltoodud lühike demovideo näitab kogu protsessi töös: HTML märgendus, PHP töötleja ja tulemus brauseris kolme minutiga.

⁉️🤔 Korduma kippuvad küsimused

Kas Dropzone.js töötab ilma jQueryta?

Jah, teek on jQueryst täiesti sõltumatu. Alates versioonist 5.x on kõik sõltuvused eemaldatud; vaata paigaldusjaotist saidil dropzone.dev. Siiski on olemas eraldi jQuery ümbris neile, kes eelistavad $('.dropzone').dropzone(); see asub samas npm-paketis teekonnal dist/min/dropzone-jquery.min.js.

Kuidas muuta veateadet, kui fail on liiga suur?

Kasuta valikut dictFileTooBig. Näide: dictFileTooBig: 'File is too big. Maximum size is {{maxFilesize}} MB'. Kohatäide {{maxFilesize}} lisab automaatselt sinu seadistustes oleva väärtuse. Täielik lokaliseerimiseks mõeldud dict-võtmete nimekiri on dokumentatsioonis.

Kas faile saab suurte mahtude korral tükkidena üles laadida?

Jah, Dropzone v5-l on sisseehitatud tugi tükkideks jaotatud üleslaadimisele valikute chunking: true, chunkSize (baitides) ja forceChunking kaudu. Server peab suutma tükke uuesti kokku panna: võtma iga tüki vastu päistega dzchunkindex ja dztotalchunkcount, salvestama need ajutiselt ning pärast viimase tüki saamist need ühendama. Valmis PHP-näide tükkide kokkupanekuks on saadaval Dropzone'i repositooriumis.

Kuidas eemaldada faili eelvaade pärast edukat üleslaadimist?

Kutsu success sündmuse töötlejas välja myDropzone.removeFile(file). Fail kaob liidesest, kuid jääb serverisse alles. Kui soovid selle ka serverist kustutada, lisa samasse töötlejasse enne removeFile väljakutset AJAX-päring.

Kas Dropzone ühildub WordPressiga?

Jah, teegi saab oma teemas või pluginas kaasata funktsiooniga wp_enqueue_script(). Tüüpiline WordPressi stsenaarium: standardse meedia üleslaadija asendamine kohandatud halduslehel või avalikul vormil. Pead vaid määrama õige töötleja URL-i, tavaliselt admin_url('admin-ajax.php') koos registreeritud AJAX-toiminguga.

Kas Dropzone.js sobib sinu projektile

Kui vajad lohista-ja-tilguta failide üleslaadimist „siin ja praegu", lahendab Dropzone.js selle ülesande kiiremini kui ükski kohandatud kood. Siin on viis põhjust, miks see teek on 2026. aastal endiselt asjakohane:

  • Sõltuvused puuduvad. Pole jQueryt, Bootstrapi ega Reacti. Lisa üks JS-fail ja see töötab.
  • Brauseriteülene tugi. Toetab brausereid kuni IE11-ni ja toimib ilma JavaScriptita rahuldavalt.
  • Valmis visualiseering. Pildi eelvaated, edenemisribad, edu- ja veaikoonid on karbist väljas olemas, ilma CSS-küljendustööta.
  • Dokumentatsioon. Ajakohane GitBook ja aktiivne GitHubi repositoorium (2026. aasta seisuga 1700+ tähte).
  • Paindlikkus. Alates lihtsast piltide suuruse muutmisest enne üleslaadimist kuni gigabaidiste failide tükkidena üleslaadimiseni on kõik seadistatav.

Millal ei ole Dropzone parim valik: kui kasutad juba Reacti või Vue'd ja soovid natiivset komponenti ilma välise DOM-i manipuleerimiseta. Reacti ökosüsteemis on react-dropzone, Vue'l on vue-dropzone. Kuid vanilla JavaScripti, jQuery projektide ja WordPressi saitide jaoks on Dropzone.js end tõestanud tööriist, mis sind alt ei vea.

Praktiline integratsiooninäide. Üks tüüpiline WordPressi stsenaarium: „Laadi dokumendid üles" leht kliendiportaalis. Kasutaja lohistab sisse passi, lepingu ja kinnisvarafotode skaneeringud. Dropzone kaasatakse teema failis functions.php funktsiooniga wp_enqueue_script() ja töötleja on kohandatud AJAX-toiming, mis on registreeritud wp_ajax_nopriv_ kaudu. Iga edukalt üles laaditud fail lisatakse meediakogusse funktsiooniga wp_insert_attachment() ja selle ID salvestatakse kasutaja metaandmetesse. Kogu esikülje kood mahub 30 reale ja serveripoolne 50 reale. Võrdluseks: samade võimalustega kohandatud lohista-ja-tilguta lahendus nõuaks 400-600 rida JavaScripti ja 2-3 päeva arendustööd.

Alternatiividest: Uppy (Transloaditi loojatelt) pakub modulaarset arhitektuuri koos pluginatega Reactile, Svelte'ile ja S3 üleslaadimistele, kuid nõuab rohkem sõltuvusi ja seadistamist. Fine Uploaderit ei ole alates 2018. aastast hooldatud; harusid on olemas, kuid ilma turvagarantiideta. Dropzone.js võidab „funktsioonide hulk keerukuse ühiku kohta" tasakaalus: üks fail, minimaalne seadistamine ja nähtavad tulemused viis minutit pärast integreerimist.

Mõned lisavõimalused, mida tasub enne alustamist teada. Dropzone pakub täielikku sündmustetsüklit: addedfile, thumbnail, uploadprogress, complete ja queuecomplete. Viimane on eriti kasulik: see käivitub, kui kõik järjekorras olevad failid on töödeldud, võimaldades kuvada kasutajale kokkuvõtva teate või suunata ta teisele lehele. Võrgutõrgete korral on olemas sisseehitatud uuesti proovimine: üleslaadimisvea korral kuvab Dropzone faili eelvaate kõrval nupu „Proovi uuesti" ja uus katse läbib sama töötlejat ilma koodi dubleerimata. Liides on dict-valikute kaudu täielikult lokaliseeritav: dictCancelUpload, dictRemoveFile, dictMaxFilesExceeded ja umbes paarkümmend muud võtit. Eestikeelse toe saab paika panna viie minutiga, kopeerides dokumentatsioonist objekti. Teek kaalub tihendatult (gzip) 28 KB, lisades mobiilse 4G puhul lehe laadimisajale vähem kui 0,1 sekundit. Kõik need omadused teevad Dropzone.js-st de facto standardi lohista-ja-tilguta üleslaadimiste jaoks raamistikevabades projektides: 2026. aasta alguse seisuga miljon npm-i allalaadimist nädalas ning kasutusel WordPressi, Laraveli ja Symfony halduspaneelides.

Toimetus
ToimetusToimetuse meeskond→ All publications

Professionaalne kirjanike ja toimetajate meeskond, kes on spetsialiseerunud kvaliteetse sisu loomisele.