Încărcarea fișierului HTML5 utilizând glisarea și plasarea. HTML5: Încărcarea fișierelor cu drag-and-drop

Datorită inovațiilor HTML5, crearea interfețelor Drag and Drop a devenit mult mai ușoară. Din păcate, aceste inovații nu au încă suport extins pentru browser, dar sper că acest lucru se va schimba în curând (funcționează în prezent în Firefox 4+, Chrome și Opera 11.10).

Markup Trebuie să spun imediat că articolul a fost scris mai mult pentru începători decât pentru profesioniști. Prin urmare, unele puncte vor fi descrise în detaliu.

Mai întâi, trebuie să creăm un fișier HTML cu următorul conținut:

Pentru a descărca, trageți fișierul aici.

Toată munca noastră se va întâmpla cu containerul dropZone. Acum să adăugăm stiluri pentru documentul nostru (style.css):

Corp ( font: 12px Arial, sans-serif; ) #dropZone (culoare: #555; dimensiunea fontului: 18px; text-align: center; lățime: 400px; umplutură: 50px 0; margine: 50px automat; fundal: #eee ; bordura: 1px solid #ccc; -webkit-border-radius: 5px ) #dropZone.hover ( background: #ddd; border-color: #aaa; ) #dropZone.error ( background: #faa ; border-color: #f00; ) #dropZone.drop ( fundal: #afa; border-color: #0f0; )

În stiluri, puteți observa trei stări pentru elementul dropZone: la trecerea cu mouse-ul, dacă apare o eroare și când are succes.

Se încarcă scriptul Acum ajungem la partea distractivă - scrierea codului JavaScript. În primul rând, trebuie să creăm variabile, în una dintre acestea vom plasa dropZone, iar în a doua vom indica dimensiunea maximă a fișierului.

$(document).ready(function() ( var dropZone = $("#dropZone"), maxFileSize = 1000000; // dimensiunea maximă a fișierului - 1 MB. ));

În continuare trebuie să verificăm dacă browserul acceptă Drag and Drop, pentru aceasta vom folosi funcția FileReader. Dacă browserul nu acceptă Drag and Drop, atunci în interiorul elementului dropZone vom scrie „Nu este acceptat de browser!” și adăugați clasa „eroare”.

Dacă (typeof(window.FileReader) == „nedefinit”) ( dropZone.text(„Nu este acceptat de browser!”); dropZone.addClass(„eroare”); )

Următorul lucru pe care îl vom face este să animam efectul tragerii unui fișier pe dropZone. Vom urmări aceste acțiuni folosind evenimentele „ondragover” și „ondragleave”. Dar, deoarece aceste evenimente nu pot fi urmărite de obiectul jQuery, trebuie să accesăm nu doar „dropZone”, ci „dropZone”.

DropZone.ondragover = function() ( dropZone.addClass("hover"); return false; ); dropZone.ondragleave = function() ( dropZone.removeClass("hover"); return false; );

Acum trebuie să scriem un handler de evenimente pentru evenimentul „ondrop” - acesta este evenimentul când fișierul trasat este aruncat. În unele browsere, când trageți fișiere în fereastra browserului, acestea se deschid automat, astfel încât acest lucru să nu se întâmple, trebuie să anulăm comportamentul standard al browserului. De asemenea, trebuie să eliminăm clasa „hover” și să adăugăm clasa „drop”.

DropZone.ondrop = function(eveniment) ( event.preventDefault(); dropZone.removeClass("hover"); dropZone.addClass("drop"); );

Fișier var = event.dataTransfer.files; if (file.size > maxFileSize) ( dropZone.text(„Fișierul este prea mare!”); dropZone.addClass(„eroare”); return false; )

Acum trebuie să scriem o solicitare AJAX care trimite fișierul nostru către handler. Pentru a crea o solicitare AJAX vom folosi obiectul XMLHttpRequest. Să adăugăm doi handlere de evenimente pentru obiectul XMLHttpRequest: unul va afișa progresul de descărcare a fișierului, iar al doilea va afișa rezultatul descărcării. Vom specifica fișierul upload.php ca handler.

Var xhr = new XMLHttpRequest(); xhr.upload.addEventListener(„progres”, uploadProgress, false); xhr.onreadystatechange = StateChange; xhr.open("POST", "/upload.php"); xhr.setRequestHeader("X-FILE-NAME", file.name); xhr.send(fișier);

Acum să aruncăm o privire la progresul descărcării și la funcțiile de rezultat al descărcarii. Funcția „uploadProgress” nu este nimic complicat, ci doar matematică simplă.

Funcția uploadProgress(event) ( var procente = parseInt(event.loaded / event.total * 100); dropZone.text("Încărcare: " + procent + "%"); )

În funcția „stateChange”, trebuie să verificăm dacă procesul de încărcare este finalizat și, dacă da, trebuie să verificăm dacă a apărut vreo eroare. Codul de solicitare de succes este „200” dacă codul diferă de acesta, înseamnă că a apărut o eroare.

Funcția stateChange(eveniment) ( if (event.target.readyState == 4) ( if (event.target.status == 200) ( dropZone.text("Încărcare finalizată cu succes!"); ) else ( dropZone.text(" A apărut o eroare!"); dropZone.addClass ("eroare"); ) ) )

Partea JavaScript este finalizată.

Partea server Tot ce ne rămâne este să scriem un simplu handler care să salveze fișierul în locația de care avem nevoie. Nu voi intra prea mult în scrierea handler-ului, ci voi da doar un mic exemplu în PHP.

Atât, sper că articolul ți-a fost de folos.

Puteți descărca fișierele sursă

Permiteți utilizatorului să încarce fișiere pe server trăgându-le, de exemplu, de pe desktop. Mai mult, ar fi posibil să glisați și să plasați mai multe fișiere simultan.

Soluţie

După cum puteți vedea din exemplul de mai sus, fișierele sunt trimise la server imediat după selecție. Să le trimitem după eveniment:

Window.onload = function())( var uploader = new qq.FileUploader(( autoUpload: false, element: document.getElementById("file-uploader")), actiune: "php/upload.php" )); $(" # startUpload").on("clic", function())( uploader.uploadStoredFiles(); )); );

Rezultat

În general, pluginul are multe opțiuni și setări și există apeluri inverse. Toate acestea sunt descrise. Fineuploader este în dezvoltare constantă, așa că atunci când conectați, vă recomand să vizitați depozitul și să descărcați cea mai recentă versiune.

Stilizare

Plugin-ul își creează structura pe baza clasei .qq-uploader, toate elementele sunt descrise în fișierul css fileuploader.css

Nota

Dacă măgarii refuză cu încăpățânare să lucreze, deschideți scenariul și căutați rândul acolo:

Var form = qq.toElement("");

și schimbați în:

Var form = qq.toElement("");

HTML