HTML5: Nahrávanie súborov pomocou funkcie Drag-and-drop. HTML5: Nahrávanie súborov pomocou Drag & Drop Zásuvné moduly typu Drag and drop na nahrávanie súborov HTML5

Pozdravujem všetkých! V tomto článku chcem hovoriť o niekoľkých mojich experimentoch s HTML5. Začnem z diaľky. Všetci musíme pravidelne pracovať s rôznymi webovými rozhraniami a často máme pocit, že táto práca by sa dala organizovať efektívnejšie.

Možno v niektorých prípadoch sú na vine vývojári služieb, ale často problém spočíva v obmedzeniach uložených prehliadačmi. Uvažujme o nahrávaní súborov na server. Vo väčšine prípadov sa vám zobrazí štandardné pole s tlačidlom na výber súboru z vášho počítača a/alebo pole, v ktorom môžete zadať adresu URL súboru umiestneného niekde na internete.

Zatiaľ sa nebudeme dotýkať sťahovania súborov z lokálneho počítača, plánujem na túto tému zverejniť samostatný príspevok, pozrime sa na sťahovanie zo vzdialeného servera.

Problémy začínajú od prvého kroku. Aj keď jasne rozumiete, kde hľadať adresu URL, a ste dobrí v používaní nástrojov ako firebug, stále bude trvať niekoľko kliknutí, kým získate správnu adresu. Oveľa pohodlnejšie by bolo jednoducho pretiahnuť požadovaný obrázok z jedného okna prehliadača do druhého.

V tomto článku ukážem príklad implementácie takéhoto rozhrania. Ak chcete, môžete vidieť, ako to funguje na demo stránke alebo .

Poznámka! Tento príklad funguje iba v prehliadači Google Chrome. Teoreticky Firefox a Safari podporujú všetky potrebné technológie, ale zatiaľ som na ne neprišiel. Fotil som hlavne z Wikipédie ako objekty na ťahanie. Bolo zaznamenaných niekoľko problémov súvisiacich s nelatinkovými znakmi v adresách URL obrázkov, ale aby sa príklad nepreťažil kontrolami a transformáciami, nechal som ich tak.

Princíp činnosti

Štandard HTML5 poskytuje podporu pre presúvanie objektov stránok. Mimochodom, už som ukázal príklad najjednoduchšej implementácie D&D – Drag & Drop pomocou HTML5. A okrem toho existuje pomerne veľa JavaScriptových knižníc, ktoré implementujú podporu D&D.

Tu je však dôležité pochopiť, že ak potrebujete „pretiahnuť“ obrázky zo zdrojov tretích strán, nebudete môcť používať knižnice. Pretože nebudete môcť pridať svoj kód JS na stránku niekoho iného. A aby sme si mohli stiahnuť obrázok, potrebujeme získať jeho URL, t.j. Prehliadač musí spolu s pretiahnutým objektom prenášať aj svoje parametre (napríklad atribút src obrázka alebo celý tag img).

V tomto prípade môžeme vytvoriť „prijímač“ obrázkov na našej stránke. Toto bude bežný div s priradenou obsluhou udalosti drop. Ak používateľ obrázok nad týmto divom „pustí“, zavolá sa handler a v prvom parametri dostane objekt obsahujúci informáciu o presúvanom obrázku.

Implementácia

Začnime s našou stránkou aplikácie.

Nahranie obrázkov


Obsahuje dva bloky: obrázky – tu ukážeme stiahnuté obrázky a img_target – do tohto bloku musíte obrázky pretiahnuť. V spodnej časti stránky prepojíme knižnicu jQuery a skript main.js, ktorý bude posielať informácie o pretiahnutých obrázkoch na server.

Pozrime sa na main.js
$(funkcia() (
$("#img_target")
.bind("ťahač", funkcia(udalosť) (
$(this).addClass("drop_here");
vrátiť nepravdu;
})
.bind("dragleave", funkcia(udalosť) (

vrátiť nepravdu;
})
.bind("dragover", funkcia(udalosť) (
vrátiť nepravdu;
})
.bind("drop", function(event) (
$(this).removeClass("drop_here");
var srcRegex = /src=\"([^\s]+)\"/ig;
var data = event.originalEvent.dataTransfer.getData("text/html");
var img_data = srcRegex.exec(data);
$.post("upload.php", ("file_url":img_data), function(res) (
var response = eval("(" + res + ")");
$("#images").append($(""));
});
vrátiť true;
});
});
Tu priraďujeme handlery k udalostiam dragenter, dragleave a dragover. Všetky by mali jednoducho vrátiť false a aby sme nejako informovali používateľa, že obrázok môže byť „vypustený“, v obslužnom programe dragenter nastavíme pre blok prijímača CSS triedu drop_here. Väčšina práce sa vykonáva v obsluhe udalosti drop. Keď k tejto udalosti dôjde, prečítame informácie o objekte “reset” a “odstrihneme” hodnotu atribútu src, t.j. URL obrázka. Informácie sa prenesú do objektu event.originalEvent.dataTransfer.

Potom vytvoríme bežnú požiadavku AJAX a odošleme nájdenú URL ako parameter. Serverový skript (upload.php) prijme URL obrázku na vzdialený server a nahrá ho. A ako odpoveď na požiadavku AJAX odošle novú adresu URL načítaného obrázka. Obsluha požiadaviek AJAX zase vytvorí img tag a vloží ho do bloku obrázkov. Stiahnuté obrázky sa teda zobrazia nad poľom sťahovania.

Zvážte upload.php

Princíp fungovania je nasledovný. Prečítame si URL adresu obrázka a pokúsime sa ho stiahnuť. Ak je obrázok nahraný, uložte ho do priečinka na nahrávanie. Príjem obrazu zo vzdialeného servera sa vykonáva pomocou funkcií fread. Súbor sa číta v 1kB blokoch. Tento prístup vám umožňuje prerušiť sťahovanie súboru, ak jeho veľkosť prekročí stanovený limit (v tomto prípade 300 kB).

Po stiahnutí súboru mu vygenerujeme URL a odošleme ho do prehliadača vo formáte JSON. Ako vidíte, implementácia takéhoto zavádzača nie je náročná. A použitie je celkom pohodlné. Prirodzene, hlavnou nevýhodou je podpora HTML5 prehliadačmi, alebo skôr ich nedostatok, ak však vytvárate rozhranie pre zamestnancov spoločnosti a môžete určiť typ prehliadača, môžete použiť HTML5.

V tomto návode vytvoríme malý formulár na nahrávanie súborov AJAX, ktorý návštevníkom umožní nahrávať súbory pomocou alebo pomocou bežného výberu súborov.

Na zobrazenie súboru jQuery použijeme pluginy jQuery File Upload a jQuery Knob.

Pretože formulár bude môcť nahrávať súbory dvoma spôsobmi, bude fungovať aj v prípade, že drag/drop nie je podporovaný.

HTML

Ako obvykle, začnime s označením HTML5:

Formulár na nahranie súboru Mini Ajax pustite sem Prehľadávať

V značke nášho dokumentu zahŕňame fonty Google Webfonts a pred zatvorením značky - JavaScriptové knižnice: jQuery, jQuery Knob a jQuery File Upload.

Hlavným prvkom stránky je #upload formulár. V jeho vnútri je prvok #drop (prijíma súbory pomocou drag&drop) a zoznam, v ktorom sa budú zobrazovať stiahnuté súbory. Značky, ktoré sa vygenerujú pre nahrané súbory:

  • Západ slnka.jpg 145 kB

    • Vstupný prvok bude skrytý pomocou CSS. Je potrebné inicializovať plugin jQuery Knob, ktorý súbor vykreslí. Vstup má atribúty data-*, ktoré sa používajú na aktualizáciu mierky. Neskôr, keď budeme sledovať priebeh načítania, aktualizujeme tieto hodnoty, aby sme prekreslili mierku. span bude obsahovať zelenú značku začiarknutia alebo červený krížik.

    jQuery

    Návštevník bude mať 2 spôsoby, ako stiahnuť súbor:

    • Presuňte súbor do okna prehliadača (nefunguje v IE).
    • Kliknutím na tlačidlo prehľadávať. Simuluje sa kliknutie na skrytý vstup a zobrazí sa okno výberu systémového súboru. Všimnite si, že vstup má viacero parametrov, ktoré vám umožnia vybrať veľa súborov naraz.

    Keď sú súbory vybraté, sú zaradené do frontu na neskoršie automatické sťahovanie:

    $(function())( var ul = $("#upload ul"); $("#drop a").click(function())( // simulácia kliknutia na pole výberu súboru $(this).parent (). find("input").click( )); // inicializujte doplnok jQuery File Upload $("#upload").fileupload(( // tento prvok prijme súbory dropZone: $(); "#drop" ), // Funkcia sa zavolá, keď je súbor zaradený do frontu add: function (e, data) ( var tpl = $("

  • "); // výstup názvu a veľkosti súboru tpl.find("p").text(data.files.name) .append(" " + formatFileSize(data.files.size) + ""); data.context = tpl.appendTo(ul); // inicializácia doplnku jQuery Knob tpl.find("input").knob(); // sledovanie kliknutí na ikonu zrušenia tpl.find("span") .click (function())( if(tpl.hasClass("working"))( jqXHR.abort(); ) tpl.fadeOut(function())( tpl.remove(); ) )); Automaticky načítať súbor pri pridávaní do frontu var jqXHR = data.submit( ), progress: function(e, data)( // Výpočet percenta načítania var progress = parseInt(data.loaded / data.total * 100,); 10 // aktualizujte mierku data.context.find("vstup").val(progres).zmena(); if(progres == 100)( data.context.removeClass("working"); ) ), fail:function(e, data) ( // niečo sa pokazilo data.context.addClass("error"); ) )); $(document).on("drop dragover", function (e) ( e.preventDefault(). )); // pomocná funkcia, ktorá formátuje funkciu veľkosti súboru formatFileSize(bytes) ( if (typeof bytes !== "number") ( return ""; ) if (bajty >= 1000000000) ( return (bajty / 1000000000); ).toFixed(2) + "GB"; ) if (bajty >= 1000000) ( return (bajty / 1000000).toFixed(2) + "MB"; ) return (bajty / 1000).toFixed(2) + "KB"; )));

    jQuery File Upload má svoje vlastné rozhranie, ale na vytvorenie vlastného dizajnu rozhrania používame základnú verziu pluginu. Aby naše rozhranie fungovalo, doplnku odovzdávame niekoľko parametrov / spätných volaní:

    • dropZone – Tento parameter obsahuje selektor jQuery, ktorý bude akceptovať zahodené súbory. Súbory, ktoré sú naň uložené, budú pridané do frontu sťahovania.
    • pridať – funkcia sa volá po pridaní súboru do frontu sťahovania. Vygeneruje označenie pre súbory a zavolá metódu data.submit().
    • progress – Táto funkcia sa bude volať každých 100 ms (možno zmeniť). Druhý argument obsahuje veľkosť súboru a počet stiahnutých bajtov. To vám umožní sledovať pokrok a aktualizovať mierku.
    • fail – funkcia sa zavolá, keď sa vyskytne chyba.
    PHP

    Súprava jQuery File Upload kit obsahuje aj PHP skript na spracovanie súborov na serveri, ale napíšeme si vlastný. Proces sťahovania súborov bude prebiehať rovnakým spôsobom ako pri bežnom sťahovaní, takže všetky informácie o nich môžeme získať z globálneho poľa $_FILES:



     

    Môže byť užitočné prečítať si: