Zuerst müssen Sie natürlich ein Element erstellen, das die Datei „abfängt“. Zusätzlich fügen wir in dieses Element ein span-Tag ein, um Ladestatusmeldungen anzuzeigen und Eingang mit Typ Datei, um die Dateiauswahl nicht auf Drag-and-Drop zu beschränken, sondern Benutzern auch die Auswahl einer Datei durch Klicken auf diesen gekennzeichneten Bereich zu ermöglichen. Die endgültige Form einer solchen Struktur ist unten gezeigt.

css dazu HTML der Code ist bis auf die Gestaltung des Feldes unauffällig Eingang:

#file( width:100%; height:100%; display:block; position:absolute; top:0; left:0; opacity:0.01; )

Wir beschreiben auch zwei Klassen, die, wenn sie zum Datei-Erfassungsbereich hinzugefügt werden, einen erfolgreichen Datei-Upload oder einen Fehler signalisieren, wenn einer auftritt:

#drop-zone.success( Hintergrundfarbe:#2ecc71; ) #drop-zone.error(Hintergrundfarbe:#e74c3c; )

Jetzt können wir damit fortfahren, die "Aktion" unserer Seite zu schreiben. Lassen Sie uns zunächst in die Variablen Verweise auf Objekte schreiben, auf die wir häufig zugreifen werden:

Var dropZone = document.getElementById("drop-zone"); var msgConteiner = document.querySelector("#drop-zone .text");

Danach werden wir die Standardereignisse los, wenn der Cursor wie folgt in unseren Dateiempfangsbereich eintritt:

Var eventClear = Funktion (e) (e.stopPropagation(); e.preventDefault(); ) dropZone.addEventListener("dragenter", eventClear, false); dropZone.addEventListener("dragover", eventClear, false);

DropZone.addEventListener("drop", function (e) ( if(!e.dataTransfer.files) return; e.stopPropagation(); e.preventDefault(); sendFile(e.dataTransfer.files); ), false); document.getElementById("file").addEventListener("change", function (e) ( sendFile(e.target.files); ), false);

In beiden Fällen endet das Ereignis mit einem Funktionsaufruf Datei senden, an die die vom Benutzer empfangene Datei übertragen wird.

Diese Funktion ist für die Übertragung der Datei auf den Server verantwortlich. Sie können ihre Beschreibung unten sehen.

Var sendFile = function(file) ( // eventuell hinzugefügte Zustandsklassen entfernen // wenn der Benutzer bereits versucht hat, etwas zu laden dropZone.classList.remove("success"); dropZone.classList.remove("error") ; // prüfe den Dateityp mit regulären Ausdrücken // (im Beispiel dürfen nur Bilder hochgeladen werden) var re = /(.jpg|.jpeg|.bmp|.gif|.png)$/i; if (!re. exec(file.name)) ( msgConteiner.innerHTML = "Ungültiges Dateiformat!"; dropZone.classList.remove("success"); dropZone.classList.add("error"); ) else ( var fd = new FormData( ); // Formularobjekt erstellen fd.append("upfile", file); // Datei zum Senden des Formulars hinzufügen var xhr = new XMLHttpRequest(); xhr.open("POST", "./upload .php", true ); xhr.upload.onprogress = showProgress; xhr.onreadystatechange = statChange; xhr.send(fd); // an Server senden ) )

Wie Sie vielleicht bemerkt haben, werden vor dem Senden von Daten an den Server auch zwei Ereignisse gesetzt, von denen das erste für die Anzeige des Download-Fortschritts und das zweite für die Benachrichtigung über das Download-Ergebnis verantwortlich ist. Sie funktionieren wie folgt:

Var showProgress = function(e) ( if (e.lengthComputable) ( // Berechnung des Ladeprozentsatzes var percent = Math.floor((e.loaded / e.total) * 100); // Anzeige des aktuellen Prozentsatzes msgConteiner. innerHTML = " Laden... ("+ Prozent +"%)"; ) ); var statChange = function (e) ( if (e.target.readyState == 4) ( // nach Abschluss der Verarbeitung der Anfrage an den Server if (e.target.status == 200) ( // wenn die Anfrage erfolgreich war msgConteiner.innerHTML = "Upload erfolgreich abgeschlossen!"; dropZone.classList.remove("error"); dropZone.classList.add("success"); document.getElementById("showUpFile").innerHTML = this.responseText; ) else ( // andernfalls msgConteiner.innerHTML = "Ein Fehler ist aufgetreten!"; dropZone.classList.remove("Erfolg"); dropZone.classList.add("Fehler"); ) ) )

Die letzte Phase wird die Verarbeitung der vom Server empfangenen Daten sein.

Wir schaffen weiterhin unsere ziehen und ablegen herunterladen, und heute werden wir unseren Server schreiben und mit dem Schreiben beginnen JavaScript der Code.

Im letzten Artikel haben wir geschrieben index.html Datei und Stile dafür. Heute werden wir einen Server schreiben, der Dateien herunterlädt und Informationen darüber an das Skript zurücksendet, aber lassen Sie uns zuerst darüber sprechen, wie unsere Dateistruktur aussehen wird:

• .htaccess
• index.html
• style.css
• hochladen.php
• Uploads

Mit Dateien index.html und style.css alles klar. Im Ordner .htaccess Wir haben nur die Codierung geschrieben, damit es keine Probleme gibt.

AddDefaultCharset UTF-8

Datei hochladen.php lädt Dateien in einem Ordner auf den Server hoch Uploads.

Beginnen wir also mit php. Öffnen Sie dazu die Datei hochladen.php und schreibe folgendes:

header("Inhaltstyp: application/json");

$hochgeladen = array();

If(!leer($_FILES["Datei"]["Name"])) (
foreach($_FILES["file"]["name"] as $position => $name) (
if(move_uploaded_file($_FILES["file"]["tmp_name"][$position], "uploads/".$name)) (
$hochgeladen = array(
"name" => $name,
"file" => "uploads/".$name
);
}
}
}

Echo json_encode ($ hochgeladen);
?>

Am Anfang der Datei schreiben wir den Header Inhaltstyp um dem Browser mitzuteilen, was er bekommen wird json. Dann erstellen wir ein leeres Array $ hochgeladen und prüfen Sie, ob überhaupt Dateien vorhanden sind. Wenn ja, iterieren Sie sie und laden Sie sie in unser Verzeichnis hoch Uploads, und füllen Sie auch unser Hauptarray aus $ hochgeladen Subarrays, die Informationen über die Dateien enthalten. In unserem Fall diese Dateiname und sein Lage. Schließlich wandeln wir unser Array in um json und nimm es heraus. Wie Sie sehen können, ist der Server überhaupt nicht kompliziert.

Kommen wir nun zur Datei. index.html

Klasse erinnern .drüber ziehen, das wir im letzten Artikel geschrieben haben, und ich sagte, dass es angewendet wird, wenn sich eine Datei über unserem Block befindet? Genau das haben wir jetzt getan. Wenn eine Datei über dem Block erscheint, wird das Ereignis ausgelöst überziehen wo wir nur unsere Klasse hinzufügen .drüber ziehen und ändern Sie den Text in "Lass die Maus los". Wenn wir die Maus mit der Datei von unserem Block wegbewegen, wird das Ereignis ausgelöst Ondrablatt, wo wir alles in seine ursprüngliche Position zurückbringen. Wenn eine Person eine Datei in unseren Block "wirft", wird das Ereignis ausgelöst fallen. Dort ändern wir wieder alles, wie es am Anfang war, sonst "hängt" unsere Klasse .drüber ziehen und das Standardverhalten überschreiben. Wenn wir dies nicht tun, wird unsere Datei einfach im Browser geöffnet, was wir nicht benötigen.

Erstellen Sie dank der Innovationen von HTML5 Ziehen und Drop-Schnittstellen sind jetzt viel einfacher geworden. Leider verfügen diese Neuerungen noch nicht über eine umfassende Browserunterstützung, aber ich hoffe, dass sich dies bald ändern wird (bis dieser Moment funktioniert in Firefox 4+, Chrome und Opera 11.10).

Auszeichnung

Ich muss gleich sagen, dass der Artikel eher für Anfänger als für Profis geschrieben ist. Daher werden einige Punkte ausführlich beschrieben.

Zuerst müssen wir eine HTML-Datei mit folgendem Inhalt erstellen:

Ziehen Sie die Datei zum Hochladen hierher.

Unsere gesamte Arbeit wird mit dem dropZone-Container erledigt. Lassen Sie uns nun Stile zu unserem Dokument hinzufügen (style.css):

Body (Schriftart: 12px Arial, serifenlos; ) #dropZone (Farbe: #555; Schriftgröße: 18px; Textausrichtung: zentriert; Breite: 400px; Polsterung: 50px 0; Rand: 50px automatisch; Hintergrund: #eee ; Rand: 1px solid #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; ) #dropZone.hover ( background: #ddd; border-color: #aaa; ) #dropZone.error ( Hintergrund: #faa; Randfarbe: #f00; ) #dropZone.drop ( Hintergrund: #afa; Randfarbe: #0f0; )

In den Stilen können Sie drei Zustände für das dropZone-Element feststellen: beim Schweben, wenn ein Fehler auftritt, und bei Erfolg.

Skript herunterladen

Jetzt kommen wir zum lustigen Teil – dem Schreiben von JavaScript-Code. Zuerst müssen wir Variablen erstellen, in einer davon platzieren wir unsere DropZone und in der zweiten legen wir die maximale Dateigröße fest.

$(document).ready(function() ( var dropZone = $("#dropZone"), maxFileSize = 1000000; // maximale Dateigröße ist 1 MB. ));

Als nächstes müssen wir prüfen, ob der Browser Drag and Drop unterstützt, dazu verwenden wir die FileReader-Funktion. Wenn der Browser Drag & Drop nicht unterstützt, schreiben wir in das dropZone-Element "Nicht vom Browser unterstützt!" und fügen Sie die Klasse "Fehler" hinzu.

If (typeof(window.FileReader) == "undefined") ( dropZone.text("Vom Browser nicht unterstützt!"); dropZone.addClass("error"); )

Als Nächstes animieren wir den Effekt des Ziehens einer Datei auf die DropZone. Wir verfolgen diese Aktionen mithilfe der Ereignisse „ondragover“ und „ondragleave“. Da diese Ereignisse jedoch nicht auf dem jQuery-Objekt verfolgt werden können, müssen wir nicht nur auf „dropZone“, sondern auf „dropZone“ zugreifen.

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

Jetzt müssen wir den Ereignishandler "ondrop" schreiben - dies ist das Ereignis, wenn die gezogene Datei abgelegt wird. In einigen Browsern werden Dateien beim Ziehen in das Browserfenster automatisch geöffnet. Damit dies nicht passiert, müssen wir das Standardverhalten des Browsers aufheben. Wir müssen auch die Klasse „hover“ entfernen und die Klasse „drop“ hinzufügen.

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

varfile = event.dataTransfer.files; if (file.size > maxFileSize) ( dropZone.text("Die Datei ist zu groß!"); dropZone.addClass("error"); return false; )

Jetzt müssen wir eine AJAX-Anfrage schreiben, die unsere Datei an den Handler sendet. Um eine AJAX-Anforderung zu erstellen, verwenden wir das XMLHttpRequest-Objekt. Lassen Sie uns zwei Event-Handler für das XMLHttpRequest-Objekt hinzufügen: Einer zeigt den Fortschritt des Datei-Downloads und der zweite das Ergebnis des Downloads. Wir geben die Datei upload.php als Handler an.

varxhr = new XMLHttpRequest(); xhr.upload.addEventListener("Fortschritt", uploadProgress, false); xhr.onreadystatechange = Zustandsänderung; xhr.open("POST", "/upload.php"); xhr.setRequestHeader("X-DATEINAME", file.name); xhr.send (Datei);

Kommen wir nun zu den Funktionen Download-Fortschritt und Download-Ergebnis. Die Funktion „uploadProgress“ ist nicht kompliziert, nur einfache Mathematik.

Funktion uploadProgress(event) ( var Prozent = parseInt(event.loaded / event.total * 100); dropZone.text("Wird geladen: " + Prozent + "%"); )

In der Funktion „stateChange“ müssen wir überprüfen, ob der Ladevorgang abgeschlossen ist, und wenn ja, dann müssen wir überprüfen, ob ein Fehler aufgetreten ist. Der erfolgreiche Anforderungscode ist "200", wenn der Code davon abweicht, dann ist ein Fehler aufgetreten.

Funktion stateChange(event) ( if (event.target.readyState == 4) ( if (event.target.status == 200) ( dropZone.text("Upload erfolgreich abgeschlossen!"); ) else ( dropZone.text(" Ein Fehler ist aufgetreten!"); dropZone.addClass("error"); ) ) )

Das Schreiben des JavaScript-Teils ist nun abgeschlossen.

Serverteil

Alles, was uns bleibt, ist, einen einfachen Handler zu schreiben, der die Datei an dem Ort speichert, den wir brauchen. Beim Schreiben des Handlers gehe ich nicht in die Tiefe, sondern gebe nur ein kleines Beispiel in PHP.

Das ist alles, ich hoffe, der Artikel war nützlich für Sie.

Sie können die Quelldateien herunterladen

Vielleicht sind in einigen Fällen die Entwickler des Dienstes schuld, aber oft liegt das Problem in den Einschränkungen, die Browser auferlegen. Erwägen Sie, Dateien auf den Server hochzuladen.

In den meisten Fällen wird Ihnen ein Standardfeld mit einer Schaltfläche zum Auswählen einer Datei von Ihrem Computer und/oder ein Feld angezeigt, in das Sie die URL einer Datei eingeben können, die irgendwo im Web gehostet wird.

Herunterladen von Dateien von lokalen Computer Wir werden es noch nicht anfassen, ich plane, einen separaten Beitrag zu diesem Thema zu veröffentlichen, wir werden den Download von analysieren entfernter Server.

Probleme beginnen mit dem ersten Schritt. Selbst wenn Sie genau wissen, wo Sie nach einer URL suchen müssen, und Tools wie Firebug gut verwenden können, sind immer noch ein paar Mausklicks erforderlich, um die richtige Adresse zu erhalten. Viel bequemer wäre es, das gewünschte Bild einfach von einem Browserfenster in ein anderes zu ziehen.

Die Implementierung einer solchen Schnittstelle werde ich in diesem Artikel zeigen. Wenn Sie möchten, können Sie auf der Demoseite sehen, wie es funktioniert, oder das Quellarchiv herunterladen.

Beachten Sie! Dieses Beispiel funktioniert nur im Browser Google Chrome. Theoretisch ist die Unterstützung für alle notwendigen Technologien in Firefox und Safari vorhanden, aber ich habe mich noch nicht damit befasst.

Als Objekte zum „Ziehen“ habe ich meistens Bilder aus Wikipedia genommen. Es wurden mehrere Probleme im Zusammenhang mit nicht-lateinischen Zeichen in den Bild-URLs festgestellt, aber um das Beispiel nicht mit Überprüfungen und Transformationen zu überladen, habe ich sie so gelassen, wie sie sind.

Arbeitsprinzip

Standard HTML5 bietet Unterstützung für das "Ziehen" von Seitenobjekten ( Drag-and-Drop). Übrigens habe ich bereits ein Beispiel für die einfachste Implementierung von D&D gezeigt - Ziehen und loslassen verwenden HTML5. Außerdem gibt es eine ganze Reihe von JavaScript-Bibliotheken, die D&D-Unterstützung implementieren.

Hier ist es jedoch wichtig zu verstehen, dass Sie keine Bibliotheken verwenden können, wenn Sie Bilder aus Ressourcen von Drittanbietern "ziehen" müssen. Da Sie können Ihren JS-Code nicht zur Seite einer anderen Person hinzufügen. Und um ein Bild hochzuladen, müssen wir seine URL erhalten, d.h. der Browser muss mit dem gezogenen Objekt seine Parameter weitergeben (zum Beispiel das src-Attribut des Bildes oder das gesamte img-Tag).

In diesem Fall können wir auf unserer Seite einen "Empfänger" von Bildern erstellen. Dies ist ein reguläres div, dem ein Drop-Event-Handler zugewiesen ist. Wenn der Benutzer das Bild über diesem div "droppt", wird der Handler aufgerufen und erhält im ersten Parameter ein Objekt, das Informationen über das gezogene Bild enthält.

Implementierung

Beginnen wir mit unserer Bewerbungsseite.

Es enthält zwei Blöcke: Bilder – hier zeigen wir hochgeladene Bilder und img_target – Sie müssen Bilder in diesen Block ziehen.

Verbinden Sie sich unten auf der Seite jQuery-Bibliothek und ein main.js-Skript, das Informationen über die gezogenen Bilder an den Server sendet.

Betrachten Sie main.js

$(Funktion() (
$("#img_target")
.bind("dragent", Funktion(Ereignis) (
$(this).addClass("drop_here");
falsch zurückgeben;
})
.bind("Dragleave", Funktion(Ereignis) (
falsch zurückgeben;
})
.bind("Dragover", Funktion(Ereignis) (
falsch zurückgeben;
})
.bind("drop", Funktion(Ereignis) (
$(this).removeClass("drop_here");
var srcRegex = /src=\"([^\s]+)\"/ig;
var data = event.originalEvent.dataTransfer.getData("text/html");
var img_data = srcRegex.exec (Daten);
$.post("upload.php", ("file_url":img_data), Funktion(res) (
var response = eval("(" + res + ")");
$("#Bilder").append($(" "));
});
gib true zurück;
});

Hier weisen wir den Ereignissen dragenter, dragleave und dragover Handler zu. Alle sollten einfach falsch zurückgeben, und um den Benutzer irgendwie darüber zu informieren, dass es möglich ist, das Bild "fallen zu lassen", setzen wir die drop_here-CSS-Klasse für den Empfängerblock im Dragenter-Handler.

Die meiste Arbeit wird im Drop-Event-Handler erledigt. Wenn dieses Ereignis eintritt, lesen wir Informationen über das "gedroppte" Objekt und "kürzen" den Wert des src-Attributs, d.h. Bild-URL (Zeile 16-18). Die Informationen werden im Objekt event.originalEvent.dataTransfer übertragen (Zeile 17).

Dann bilden wir einen regulären AJAX-Request und übergeben die gefundene URL als Parameter.

Das Serverskript (upload.php) erhält die URL des Bildes auf dem Remote-Server und lädt es hoch. Und als Antwort auf die AJAX-Anforderung wird die neue URL des hochgeladenen Bildes gesendet.

Der AJAX-Request-Handler wiederum erstellt ein img-Tag und fügt es in den Bildblock ein. Somit erscheinen die hochgeladenen Bilder über dem Upload-Feld.

Betrachten Sie upload.php

define("BASE_URL", "http://localhost/tests/images-upload/");

Funktion upload_from_url($file_url) (
$url_segments = explode("/", $file_url);
$file_name = urldecode(end($url_segments));
if (false !== $file_name) (
$file_name_parts = explode(".", $file_name);
if (in_array(strtolower(end($file_name_parts)), array("jpeg","jpg","png","gif"))) (
$destination=fopen("upload/".$file_name,"w");
$source=fopen($file_url,"r");
$maxsize=300*1024;
$länge=0;
while (($a=fread($source,1024))&&($length<$maxsize)) {
$länge=$länge+1024;
fwrite($ziel,$a);
}
fclose($quelle);
fclose($ziel);
}
}
$new_file_url = BASE_URL."hochladen/".$file_name;
geben Sie $neue_Datei_url zurück;
}

$res = array("err" => "Keine Datei-URL angegeben");

if (isset($_POST["file_url"])) (
$new_url = upload_from_url($_POST["file_url"]);
$res = array("file_url" => $neue_url);
}

echo json_encode($res);

Das Funktionsprinzip ist das folgende. Wir lesen die URL des Bildes und versuchen, es herunterzuladen (Zeile 29-32).

Wenn das Bild hochgeladen wurde, speichern Sie es im Upload-Ordner. Das Abrufen eines Bildes von einem entfernten Server erfolgt mithilfe der fread-Funktionen. Die Datei wird in 1kB-Blöcken gelesen (Zeile 15-18). Mit diesem Ansatz können Sie den Download der Datei unterbrechen, wenn ihre Größe die angegebene Grenze (in diesem Fall 300 kB) überschreitet.

Nach dem Herunterladen der Datei generieren wir eine URL dafür und senden sie an den Browser in json-Format.

Wie Sie sehen können, ist die Implementierung eines solchen Loaders einfach. Und es ist sehr bequem, es zu benutzen. Der Hauptnachteil ist natürlich die HTML5-Unterstützung durch Browser, oder besser gesagt, das Fehlen.

Wenn Sie jedoch eine Benutzeroberfläche für Mitarbeiter eines Unternehmens erstellen und den Browsertyp angeben können, kann HTML5 verwendet werden.

Grüße an alle! In diesem Artikel möchte ich über einige meiner Experimente mit HTML5 sprechen. Ich fange von weitem an. Wir alle müssen regelmäßig mit verschiedenen Weboberflächen arbeiten und oft entsteht das Gefühl, dass diese Arbeit effizienter organisiert werden könnte.

Vielleicht sind in einigen Fällen die Entwickler des Dienstes schuld, aber oft liegt das Problem in den Einschränkungen, die Browser auferlegen. Erwägen Sie, Dateien auf den Server hochzuladen. In den meisten Fällen wird Ihnen ein Standardfeld mit einer Schaltfläche zum Auswählen einer Datei von Ihrem Computer und/oder ein Feld angezeigt, in das Sie die URL einer Datei eingeben können, die irgendwo im Web gehostet wird.

Wir werden den Download von Dateien vom lokalen Computer vorerst nicht berühren, ich plane, einen separaten Beitrag zu diesem Thema zu veröffentlichen, wir werden den Download von einem Remote-Server analysieren.

Probleme beginnen mit dem ersten Schritt. Selbst wenn Sie genau wissen, wo Sie nach einer URL suchen müssen, und Tools wie Firebug gut verwenden können, sind immer noch ein paar Mausklicks erforderlich, um die richtige Adresse zu erhalten. Viel bequemer wäre es, das gewünschte Bild einfach von einem Browserfenster in ein anderes zu ziehen.

Ich werde in diesem Artikel ein Beispiel für die Implementierung einer solchen Schnittstelle zeigen. Wenn Sie möchten, können Sie auf der Demo-Seite oder sehen, wie es funktioniert.

Beachten Sie! Dieses Beispiel funktioniert nur in Google-Browser Chrom. Theoretisch ist die Unterstützung für alle notwendigen Technologien in Firefox und Safari vorhanden, aber ich habe mich noch nicht damit befasst. Als Objekte zum "Ziehen" habe ich meistens Bilder aus Wikipedia genommen. Es wurden mehrere Probleme im Zusammenhang mit nicht-lateinischen Zeichen in den Bild-URLs festgestellt, aber um das Beispiel nicht mit Überprüfungen und Transformationen zu überladen, habe ich sie so gelassen, wie sie sind.

Arbeitsprinzip

Der HTML5-Standard bietet Unterstützung für das „Ziehen“ von Seitenobjekten (Drag and Drop). Übrigens habe ich bereits ein Beispiel für die einfachste Implementierung von D&D gezeigt - Drag & Drop mit HTML5. Außerdem gibt es eine ganze Reihe von JavaScript-Bibliotheken, die D&D-Unterstützung implementieren.

Aber hier ist es wichtig zu verstehen, dass Sie keine Bibliotheken verwenden können, wenn Sie Bilder aus Ressourcen von Drittanbietern „ziehen“ müssen. Da Sie können Ihren JS-Code nicht zur Seite einer anderen Person hinzufügen. Und um ein Bild hochzuladen, müssen wir seine URL erhalten, d.h. der Browser muss mit dem gezogenen Objekt seine Parameter weitergeben (zum Beispiel das src-Attribut des Bildes oder das gesamte img-Tag).

In diesem Fall können wir auf unserer Seite einen "Empfänger" von Bildern erstellen. Dies ist ein reguläres div, dem ein Drop-Event-Handler zugewiesen ist. Wenn der Benutzer das Bild über diesem div "droppt", wird der Handler aufgerufen und erhält im ersten Parameter ein Objekt, das Informationen über das gezogene Bild enthält.

Implementierung

Beginnen wir mit unserer Bewerbungsseite.

Bilder hochladen

Es enthält zwei Blöcke: Bilder – hier zeigen wir hochgeladene Bilder und img_target – Sie müssen Bilder in diesen Block ziehen. Unten auf der Seite fügen wir die jQuery-Bibliothek und das main.js-Skript ein, das Informationen über die gezogenen Bilder an den Server sendet.

Betrachten Sie main.js
$(Funktion() (
$("#img_target")
.bind("dragent", Funktion(Ereignis) (
$(this).addClass("drop_here");
falsch zurückgeben;
})
.bind("Dragleave", Funktion(Ereignis) (

falsch zurückgeben;
})
.bind("Dragover", Funktion(Ereignis) (
falsch zurückgeben;
})
.bind("drop", Funktion(Ereignis) (
$(this).removeClass("drop_here");
var srcRegex = /src=\"([^\s]+)\"/ig;
var data = event.originalEvent.dataTransfer.getData("text/html");
var img_data = srcRegex.exec (Daten);
$.post("upload.php", ("file_url":img_data), Funktion(res) (
var response = eval("(" + res + ")");
$("#Bilder").append($(""));
});
gib true zurück;
});
});
Hier weisen wir den Ereignissen dragenter, dragleave und dragover Handler zu. Alle sollten einfach falsch zurückgeben, und um den Benutzer irgendwie darüber zu informieren, dass es möglich ist, das Bild „fallen zu lassen“, setzen wir die drop_here-CSS-Klasse für den Empfängerblock im Dragenter-Handler. Die meiste Arbeit wird im Drop-Event-Handler erledigt. Wenn dieses Ereignis eintritt, lesen wir Informationen über das „gedroppte“ Objekt und „kürzen“ den Wert des src-Attributs, d.h. Bild URL. Die Informationen werden im Objekt event.originalEvent.dataTransfer übertragen.

Dann bilden wir einen regulären AJAX-Request und übergeben die gefundene URL als Parameter. Das Serverskript (upload.php) erhält die URL des Bildes auf dem Remote-Server und lädt es hoch. Und als Antwort auf die AJAX-Anforderung wird die neue URL des hochgeladenen Bildes gesendet. Der AJAX-Request-Handler wiederum erstellt ein img-Tag und fügt es in den Bildblock ein. Somit erscheinen die hochgeladenen Bilder über dem Upload-Feld.

Betrachten Sie upload.php

Define("BASE_URL", "http://localhost/tests/images-upload/");

Funktion upload_from_url($file_url) (
$url_segments = explode("/", $file_url);
$file_name = urldecode(end($url_segments));
if (false !== $file_name) (
$file_name_parts = explode(".", $file_name);
if (in_array(strtolower(end($file_name_parts)), array("jpeg","jpg","png","gif"))) (
$destination=fopen("upload/".$file_name,"w");
$source=fopen($file_url,"r");
$maxsize=300*1024;
$länge=0;
while (($a=fread($source,1024))&&($length<$maxsize)) {
$länge=$länge+1024;
fwrite($ziel,$a);
}
fclose($quelle);
fclose($ziel);
}
}
$new_file_url = BASE_URL."hochladen/".$file_name;
geben Sie $neue_Datei_url zurück;
}

$res = array("err" => "Keine Datei-URL angegeben");

Wenn (isset($_POST["Datei_URL"])) (
$new_url = upload_from_url($_POST["file_url"]);
$res = array("file_url" => $neue_url);
}

echo json_encode($res);
?>
Das Funktionsprinzip ist das folgende. Wir lesen die URL des Bildes und versuchen, es herunterzuladen. Wenn das Bild hochgeladen wurde, speichern Sie es im Upload-Ordner. Das Abrufen eines Bildes von einem entfernten Server erfolgt mithilfe der fread-Funktionen. Die Datei wird in Blöcken von 1kB gelesen. Mit diesem Ansatz können Sie den Download der Datei unterbrechen, wenn ihre Größe die angegebene Grenze (in diesem Fall 300 kB) überschreitet.

Nach dem Herunterladen der Datei generieren wir eine URL dafür und senden sie im JSON-Format an den Browser. Wie Sie sehen können, ist die Implementierung eines solchen Loaders einfach. Und es ist sehr bequem, es zu benutzen. Der Hauptnachteil ist natürlich die HTML5-Unterstützung durch Browser bzw. deren Fehlen.Wenn Sie jedoch eine Benutzeroberfläche für Mitarbeiter eines Unternehmens erstellen und den Browsertyp festlegen können, kann HTML5 verwendet werden.