Ovo označavanje nema nikakve posebne veze s povlačenjem i ispuštanjem. To je samo normalno, funkcionalno, iako s nekim dodatnim HTML elementima za potencijalna stanja.
Odaberite datoteku ili je povucite ovdje. Prijenos završen! Greška! .
Sakrit ćemo ta stanja dok nam ne zatrebaju:
Box__dragndrop, .box__uploading, .box__success, .box__error ( prikaz: ništa; )
Malo objašnjenje:
- Što se tiče stanja: element .box__uploading bit će vidljiv tijekom Ajax procesa učitavanja datoteke (a ostali će i dalje biti skriveni). Zatim će se prikazati .box__success ili .box__error ovisno o tome što se dogodi.
- unos i oznaka su funkcionalni dijelovi forme. Pisao sam o njihovom zajedničkom oblikovanju u svom postu o prilagodbi unosa datoteka. U tom sam postu također opisao svrhu atributa. Unos i oznaka također služe kao alternativa za odabir datoteka na standardni način (ili jedini način ako povlačenje i ispuštanje nije podržano).
- .box__dragndrop bit će prikazan ako preglednik podržava funkciju povlačenja i ispuštanja datoteke.
Ne možemo se 100% osloniti na preglednike koji podržavaju povlačenje i ispuštanje. Trebali bismo osigurati rezervno rješenje. I tako: otkrivanje značajki. Prijenos datoteke povlačenjem i ispuštanjem oslanja se na niz različitih JavaScript API-ja, pa ćemo morati provjeriti sve njih.
Omogućite korisniku učitavanje datoteka na poslužitelj povlačenjem, na primjer, s radne površine. Štoviše, bilo bi moguće povući i ispustiti nekoliko datoteka odjednom.
RiješenjeKao što možete vidjeti iz gornjeg primjera, datoteke se šalju na poslužitelj odmah nakon odabira. Pošaljimo ih po događaju:
Window.onload = function())( var uploader = new qq.FileUploader(( autoUpload: false, element: document.getElementById("file-uploader")), akcija: "php/upload.php" )); $(" # startUpload").on("klik", funkcija())( uploader.uploadStoredFiles(); )); );
ProizlazitiOpćenito, dodatak ima mnogo opcija i postavki, a postoje i povratni pozivi. Sve je to opisano. Fineuploader je u stalnom razvoju, pa prilikom povezivanja preporučujem da posjetite repozitorij i preuzmete najnoviju verziju.
StilizacijaDodatak stvara svoju strukturu na temelju klase .qq-uploader, svi elementi su opisani u css datoteka fileuploader.css
Na bilješkuAko magarci tvrdoglavo odbijaju raditi, otvorite skriptu i tamo potražite redak:
Var form = qq.toElement("");
i promijeniti u:
Var form = qq.toElement("");
Nastavljamo s izradom preuzimanja povuci i ispusti, a danas ćemo napisati naš poslužitelj i početi pisati JavaScript kod.
U prošlom smo članku napisali datoteku index.html i stilove za nju. Danas ćemo napisati poslužitelj koji će preuzimati datoteke i slati informacije o njima natrag u skriptu, ali prvo razgovarajmo o tome kakvu ćemo strukturu datoteka imati:
- .htaccess
- index.html
- stil.css
- upload.php
- učitavanja
Sve je jasno s datotekama index.html i style.css. Jednostavno namjestimo kodiranje u .htaccess datoteci tako da nema problema.
Dodaj zadani skup znakova UTF-8
Datoteka upload.php će učitati datoteke na poslužitelj u mapu za uploads.
Pa počnimo s php-om. Da biste to učinili, otvorite datoteku upload.php i napišite sljedeće:
Na početku datoteke pišemo zaglavlje Content-Type kako bismo pregledniku rekli da će primiti json. Zatim stvaramo prazan niz $uploaded i provjeravamo ima li uopće datoteka. Ako da, onda ih prolazimo i učitavamo u naš direktorij za učitavanje, a također ispunjavamo naš glavni $uploaded niz podnizovima koji će sadržavati informacije o datotekama. U našem slučaju, ovo je naziv datoteke i njezino mjesto. Na kraju, pretvaramo naš niz u json i ispisujemo ga. Kao što vidite, poslužitelj uopće nije kompliciran.
Sada prijeđimo na datoteku index.html
Povucite datoteke ovdje
(funkcija() (
var dropzone = document.getElementById("dropzone");
dropzone.ondragover = function() (
this.className = "dropzone dragover";
this.innerHTML = "Pusti miš";
vratiti lažno;
};
Dropzone.ondragleave = function() (
vratiti lažno;
};
Dropzone.ondrop = funkcija(e) (
this.className = "dropzone";
this.innerHTML = "Povucite datoteke ovdje";
e.preventDefault();
};
})();
Sjećate li se klase .dragover koju smo napisali u prošlom članku, i rekao sam da će se koristiti kada postoji neka datoteka iznad našeg bloka? To je, zapravo, ono što smo sada učinili. Kada se neka datoteka pojavi iznad bloka, pokreće se događaj ondragover, gdje jednostavno dodamo našu klasu .dragover i promijenimo tekst u "Pusti miša". Kada odmaknemo miša s datotekom od našeg bloka, aktivira se ondragleave događaj, gdje sve vraćamo na prvobitnu poziciju. Kada osoba "ispusti" datoteku u naš blok, pokreće se ondrop događaj. Tu ponovno mijenjamo sve, kao što je bilo na početku, inače će se klasa .dragover zamrznuti i poništavamo zadano ponašanje. Ako to ne učinimo, naša će se datoteka jednostavno otvoriti u pregledniku, što nije ono što želimo.
Pozdrav svima! U ovom članku želim govoriti o nekoliko svojih eksperimenata s HTML5. Počet ću izdaleka. Svi povremeno moramo raditi s raznim web sučeljima i često imamo osjećaj da bi se taj posao mogao organizirati učinkovitije.
Možda su u nekim slučajevima krivi programeri usluga, ali često problem leži u ograničenjima koja nameću preglednici. Razmotrimo učitavanje datoteka na poslužitelj. U većini slučajeva prikazat će vam se standardno polje s gumbom za odabir datoteke s vašeg računala i/ili polje u kojem možete navesti URL datoteke koja se nalazi negdje na webu.
Preuzimanje datoteka s lokalno računalo Ne dirajmo to za sada, planiram objaviti zaseban post o ovoj temi, pogledajmo preuzimanje s udaljenog poslužitelja.
Problemi počinju od prvog koraka. Čak i ako jasno razumijete gdje tražiti URL i dobro se koristite alatima poput firebuga, svejedno će biti potrebno nekoliko klikova da biste dobili pravu adresu. Bilo bi mnogo prikladnije jednostavno povući željenu sliku iz jednog prozora preglednika u drugi.
Pokazat ću primjer implementacije takvog sučelja u ovom članku. Ako želite, možete vidjeti kako radi na demo stranici ili .
Bilješka! Ovaj primjer radi samo u Google preglednik Krom. U teoriji, Firefox i Safari podržavaju sve potrebne tehnologije, ali još ih nisam shvatio. Uglavnom sam uzimao slike s Wikipedije kao objekte za povlačenje. Uočeno je nekoliko problema vezanih uz nelatinične znakove u URL-ovima slika, ali kako ne bih preopteretio primjer provjerama i transformacijama, ostavio sam ih kako jesu.
Princip rada
Standard HTML5 pruža podršku za povlačenje i ispuštanje objekata stranice. Usput, već sam pokazao primjer najjednostavnije implementacije D&D-a - Drag & Drop pomoću HTML5. A osim toga, postoji dosta JavaScript biblioteka koje implementiraju D&D podršku.
Ali ovdje je važno razumjeti da ako trebate "povući" slike iz izvora trećih strana, tada nećete moći koristiti biblioteke. Jer nećete moći dodati svoj JS kod na tuđu stranicu. A da bismo preuzeli sliku, moramo dobiti njen URL, tj. Preglednik također mora prenijeti svoje parametre zajedno s povučenim objektom (na primjer, src atribut slike ili cijelu img oznaku).
U tom slučaju možemo stvoriti "primatelja" slika na našoj stranici. Ovo će biti obični div s dodijeljenim rukovateljem događaja pada. Ako korisnik “ispusti” sliku iznad ovog diva, bit će pozvan rukovatelj koji će u prvom parametru primiti objekt koji sadrži informacije o slici koja se povlači.
Provedba
Počnimo s našom stranicom za prijavu.
Prijenos slika
Sadrži dva bloka: slike – ovdje ćemo prikazati preuzete slike i img_target – u ovaj blok morate povući slike. Na dnu stranice povezujemo jQuery biblioteku i main.js skriptu, koja će poslati informacije o povučenim slikama na server.
Pogledajmo main.js
$(funkcija() (
$("#img_target")
.bind("dragenter", funkcija(događaj) (
$(ovo).addClass("ispusti_ovdje");
vratiti lažno;
})
.bind("dragleave", funkcija(događaj) (
vratiti lažno;
})
.bind("dragover", funkcija(događaj) (
vratiti lažno;
})
.bind("drop", funkcija(event) (
$(this).removeClass("ispusti_ovdje");
var srcRegex = /src=\"([^\s]+)\"/ig;
var data = event.originalEvent.dataTransfer.getData("text/html");
var img_data = srcRegex.exec(podaci);
$.post("upload.php", ("file_url":img_data), function(res) (
var response = eval("(" + res + ")");
$("#slike").dodaj($(""));
});
vratiti istinito;
});
});
Ovdje dodjeljujemo rukovatelje događajima dragenter, dragleave i dragover. Sve bi one trebale jednostavno vratiti false i, kako bismo nekako obavijestili korisnika da se slika može "ispustiti", u dragenter handleru postavljamo CSS klasu drop_here za blok primatelja. Većina posla obavlja se u rukovatelju događajima pada. Kada se dogodi ovaj događaj, čitamo informacije o objektu “reset” i “sječemo” vrijednost atributa src, tj. URL slike. Informacije se prenose u objektu event.originalEvent.dataTransfer.
Zatim formiramo regularni AJAX zahtjev i prosljeđujemo pronađeni URL kao parametar. Poslužiteljska skripta (upload.php) će primiti URL slike na udaljenom poslužitelju i učitati je. A kao odgovor na AJAX zahtjev, poslat će novi URL učitane slike. S druge strane, rukovatelj AJAX zahtjevima će stvoriti img oznaku i umetnuti je u blok slika. Tako će se preuzete slike pojaviti iznad polja za preuzimanje.
Razmotrite upload.php
Princip rada je sljedeći. Čitamo URL slike i pokušavamo je preuzeti. Ako je slika učitana, spremite je u mapu za učitavanje. Primanje slike s udaljenog poslužitelja provodi se pomoću fread funkcija. Datoteka se čita u blokovima od 1 kB. Ovaj vam pristup omogućuje prekid preuzimanja datoteke ako njezina veličina premaši određeno ograničenje (in u ovom slučaju 300 kB).
Nakon preuzimanja datoteke, formiramo URL za nju i šaljemo je pregledniku u JSON format. Kao što vidite, implementacija takvog bootloadera nije teška. I vrlo je zgodan za korištenje. Naravno, glavni nedostatak je podrška HTML5 od strane preglednika, odnosno nedostatak istog, međutim, ako kreirate sučelje za zaposlenike tvrtke, a možete odrediti vrstu preglednika, tada se HTML5 može koristiti.
U ovom vodiču napravit ćemo mali obrazac za učitavanje AJAX datoteke koji će posjetiteljima omogućiti učitavanje datoteka koristeći ili koristeći uobičajeni odabir datoteka.
Koristit ćemo dodatke jQuery File Upload i jQuery Knob za prikaz .
Jer obrazac će moći učitavati datoteke na dva načina, radit će čak i ako drag/drop nije podržan.
HTMLKao i obično, počnimo s HTML5 označavanjem:
Mini Ajax obrazac za učitavanje datoteke ispustite ovdje pretraživati
U oznaci našeg dokumenta povezujemo se Google fontovi Webfontovi, a prije završne oznake - JavaScript biblioteke: jQuery, jQuery Knob i jQuery File Upload.
Glavni element stranice je obrazac #upload. Unutar njega nalazi se #drop element (prihvaća datoteke koristeći drag&drop) i popis u kojem će se prikazati preuzete datoteke. Markup koji će se generirati za učitane datoteke:
Zalazak sunca.jpg 145 KB
Ulazni element bit će skriven pomoću koristeći CSS. Potreban je za inicijalizaciju jQuery dodatak Gumb koji će nacrtati turpiju. Unos ima data-* atribute koji se koriste za ažuriranje ljestvice. Kasnije, kada budemo pratili napredak učitavanja, ažurirat ćemo ove vrijednosti kako bismo ponovno iscrtali ljestvicu. raspon će sadržavati zelenu kvačicu ili crveni križ.
jQueryPosjetitelj će imati 2 načina za preuzimanje datoteke:
- Povucite datoteku u prozor preglednika (ne radi u IE).
- Klikom na gumb za pregledavanje. Klik na skriveni unos bit će simuliran i prikazat će se prozor za odabir sistemske datoteke. Imajte na umu da unos ima više parametara, što će vam omogućiti da odaberete više datoteka odjednom.
Kada se datoteke odaberu, stavljaju se u čekanje za kasnije automatsko preuzimanje:
$(function())( var ul = $("#upload ul"); $("#drop a").click(function())( // simulacija klika na polje za odabir datoteke $(this).parent (). find("input").click(); )); // inicijalizirajte jQuery dodatak File Upload $("#upload").fileupload(( // ovaj element će prihvatiti datoteke ispuštene na njega dropZone: $( "#drop"), // Funkcija će biti pozvana kada je datoteka u redu čekanja add: function (e, data) ( var tpl = $("
"); // izlaz naziva i veličine datoteke tpl.find("p").text(data.files.name) .append(" " + formatFileSize(data.files.size) + ""); data.context = tpl.appendTo(ul); // inicijalizacija dodatka jQuery Knob tpl.find("input").knob(); // praćenje klikova na ikonu za otkazivanje tpl.find("span") .click (function())( if(tpl.hasClass("working"))( jqXHR.abort(); ) tpl.fadeOut(function())( tpl.remove(); )); )); // Automatski učitaj datoteku pri dodavanju u red čekanja var jqXHR = data.submit(); ), progress: function(e, data)( // Izračunavanje postotka učitavanja var progress = parseInt(data.loaded / data.total * 100, 10); // ažuriranje ljestvice data.context.find("input").val(progress).change(); if(progress == 100)( data.context.removeClass("working"); ) ), fail:function(e, data) ( // nešto nije u redu data.context.addClass("error"); ) )); $(document).on("drop dragover", function (e) ( e.preventDefault( ); )); // pomoćna funkcija koja formatira veličinu datoteke funkcija formatFileSize(bytes) ( if (typeof bytes !== "number") ( return ""; ) if (bytes >= 1000000000) ( return (bytes / 1000000000 ).toFixed(2 ) + "GB"; ) if (bajtovi >= 1000000) ( return (bajtovi / 1000000).toFixed(2) + " MB"; ) return (bajtovi / 1000).toFixed(2) + " KB"; ) ));jQuery File Upload ima vlastito sučelje, ali koristimo osnovnu verziju dodatka za izradu vlastitog dizajna sučelja. A da bi naše sučelje radilo, dodatku prosljeđujemo nekoliko parametara/povratnih poziva:
- dropZone – Ovaj parametar sadrži jQuery selektor koji će prihvatiti ispuštene datoteke. Datoteke ispuštene na njega bit će dodane u red čekanja za preuzimanje.
- add – funkcija se poziva kada se datoteka doda u red čekanja za preuzimanje. Generirati će oznake za datoteke i pozvati metodu data.submit().
- napredak – ova funkcija će se pozivati svakih 100 ms (može se promijeniti). Drugi argument sadrži veličinu datoteke i broj preuzetih bajtova. To vam omogućuje praćenje napretka i ažuriranje ljestvice.
- fail – funkcija se poziva kada se pojavi greška.
jQuery File Upload također uključuje PHP skripta za obradu datoteka na poslužitelju, ali mi ćemo napisati svoje. Proces preuzimanja datoteka odvijat će se na isti način kao i tijekom normalnog preuzimanja, tako da sve informacije o njima možemo dobiti iz globalnog polja $_FILES: