Da der Titel ein Beispiel ist, werde ich diesmal nicht erklären, weil ich dieses Beispiel auch zusammengesetzt habe. Ich habe ungefähr 5 oder 6 Drag-and-Drop-Plug-Ins und Demos verwiesen und dann die besten ausgesucht und schließlich zu einem solchen Beispiel geworden. Lassen Sie uns einen Blick darauf werfen (die Adresse kann nicht lange garantiert werden. Wenn sie fehlschlägt, klicken Sie bitte am Ende des Artikels auf die Demo, um sie herunterzuladen):
Ich beziehe mich auf eine ausländische Fotoalbum -Website. Die Veränderungen sind nicht viel, aber der Stil des Vogelgesangs wird in Chinesisch umgewandelt, und auch der Hochladensstil wurde verändert. Der Grund dafür, dies zu wählen, ist, dass es für mich einfach ist, zu expandieren. Es unterstützt drei Möglichkeiten, Bilder hinzuzufügen, eine zum Hochladen von Drag & Drop, eine zum Hochladen einer regulären Datei, und das andere besteht darin, Netzwerkbilder hinzuzufügen. Es integriert die drei Upload -Modi geschickt zusammen und Sie können mit dem IE -Browser durchsuchen. Wenn HTML5 nicht unterstützt wird, gibt es keine Aufforderung, Bilder hochzuladen, wie im Bild gezeigt:
Das Wichtigste beim Upload des Drag-and-Drop-Uploads ist der JS-Teilcode, der 70% der Funktionen implementiert, und die anderen 30% leisten einfach die Bildinformationen in den Hintergrund und führen dann die entsprechende Verarbeitung wie Komprimierung, Beschneiden usw. durch.
$ (). Ready (function () {
if ($. browser.safari || $ .browser.mozilla) {
$ ('#DTB-MSG1 .Compatible'). Show ();
$ ('#dtb-msg1 .notcompatible'). hide ();
$ ('#Drop_zone_home'). Hover (function () {
$ (this) .Children ('P'). Stop (). Animate ({top: '0px'}, 200);
},Funktion(){
$ (this) .Children ('P'). Stop (). Animate ({top: '-44px'}, 200);
});
// Funktionsimplementierung
$ (Dokument) .on ({{{
Dragleave: Funktion (e) {
E.PreventDefault ();
$ ('. Dashboard_target_box'). removeclass ('Over');
},
Drop: Funktion (e) {
E.PreventDefault ();
//$('.dashboard_target_box').removeclass('over ');
},
Dragenter: Funktion (e) {
E.PreventDefault ();
$ ('. Dashboard_target_box'). AddClass ('Over');
},
Dragover: Funktion (e) {
E.PreventDefault ();
$ ('. Dashboard_target_box'). AddClass ('Over');
}
});
var box = document.getElementById ('target_box');
box.addeventListener ("Drop", Funktion (e) {
E.PreventDefault ();
// Die Dateiliste erhalten
var filelist = e.datatransfer.files;
var img = document.createelement ('img');
// Erfassen Sie, ob sie die Datei auf die Seite zeichnet
if (filelist.length == 0) {
$ ('. Dashboard_target_box'). removeclass ('Over');
zurückkehren;
}
// Erkennen Sie, ob die Datei ein Bild ist
if (filelist [0] .type.indexof ('Bild') === -1) {
$ ('. Dashboard_target_box'). removeclass ('Over');
zurückkehren;
}
if ($. browser.safari) {
// Chrome8+
img.src = window.webkiturl.createObjecturl (filelist [0]);
} else if ($. browser.mozilla) {
// ff4+
img.src = window.url.createObjecturl (Filelist [0]);
}anders{
// das Dateileserobjekt instanziieren
var reader = new fileReader ();
Reader.onload = Funktion (e) {
img.src = this.Result;
$ (document.body) .AppendChild (IMG);
}
Reader.ReadasDataurl (Filelist [0]);
}
var xhr = new xmlhttprequest ();
xhr.open ("post", "test.php", true);
xhr.setRequestheader ("X-Requested-with", "xmlhttprequest");
XHR.Upload.AdDeVentListener ("Fortschritt", Funktion (e) {
$ ("#DTB-MSG3"). Hide ();
$ ("#dtb-msg4 span"). show ();
$ ("#DTB-MSG4"). Kinder ('span'). EQ (1) .css ({width: '0px'});
$ ('. Show'). Html ('');
if (e.LengthComputable) {
var laded = math.ceil ((e.Loaded / e.total) * 100);
$ ("#DTB-MSG4"). Kinder ('span'). EQ (1) .css ({width: (geladen*2)+'px'});
}
}, FALSCH);
xhr.addeventListener ("Load", Funktion (e) {
$ ('. Dashboard_target_box'). removeclass ('Over');
$ ("#DTB-MSG3"). Show ();
$ ("#dtb-msg4 span"). hide ();
var result = jQuery.Parsejson (e.target.responsetext);
alert (result.FileName);
$ ('. show'). append (result.img);
}, FALSCH);
var fd = new FormData ();
fd.Append ('xFile', Filelist [0]);
xhr.send (fd);
},FALSCH);
}anders{
$ ('#DTB-MSG1 .Compatible'). Hide ();
$ ('#dtb-msg1 .notcompatible'). show ();
}
});
Zuerst habe ich den Browsertyp zum ersten Mal beurteilt, weil verschiedene Browser, wie ich gerade eingeführt habe, verschiedene Schnittstellen sehen. Die Hauptimplementierung des Codes beginnt mit der Funktionsinimposition. Ich werde nicht viel darüber sagen, warum es so funktioniert und was das Prinzip ist. Sie können diesen Artikel beziehen: "Detaillierte Erläuterung des Drag & Drop -Uploads auf Renren -Homepage (HTML5 Drag & Drop, FileReader API, FormData)". Der Code im AJAX -Upload -Teil ist jedoch immer noch etwas anders, da Renren ein wenig problematisch zu sein scheint, also werde ich einen anderen Weg finden.
Schließlich lade ich einen Teil des PHP -Code hoch. Hier biete ich nur eine Referenz an, Sie können sie selbst nach den Anforderungen des Projekts schreiben.
$ r = new STDClass ();
Header ('Inhaltstyp: Anwendung/JSON');
$ maxSize = 10; // mb
if ($ _ files ['xFile'] ['Größe']> ($ maxSize * 1048576)) {
$ r-> error = "Die Bildgröße überschreitet $ maxSize mb nicht";
}
$ order = 'Dateien/';
if (! is_dir ($ order)) {
mkdir ($ order);
}
$ order. = $ _post ['Ordner']? $ _Post ['Ordner']. '/': '';
if (! is_dir ($ order)) {
mkdir ($ order);
}
if (preg_match ('/image/i', $ _files ['xFile'] ['Typ'])) {
$ Dateiname = $ _post ['value']? $ _Post ['value']: $ order. SHA1 (@microtime (). '-'. $ _files ['xFile'] ['Name']). '.jpg';
}anders{
$ tld = split (',', $ _files ['xFile'] ['Name']);
$ tld = $ tld [count ($ tld) - 1];
$ Dateiname = $ _post ['value']? $ _Post ['value']: $ order. SHA1 (@microtime (). '-'. $ _files ['xFile'] ['Name']). $ tld;
}
$ type = array ('image/png', 'image/gif', 'image/jpeg');
if (in_array ($ _ files ['xFile'] ['Typ'], $ type)) {
$ source = file_get_contents ($ _ files ["xFile"] ["tmp_name"]);
ImageSize ($ Source, $ Dateiname, $ _post ['width'], $ _post ['Höhe'], $ _post ['crop'], $ _post ['Qualität']);
}anders{
move_uPloaded_file ($ _ files ["xFile"] ["tmp_name"], $ Dateiname);
}
$ path = str_replace ('test.php', '', $ _server ['script_name']);
$ r-> Dateiname = $ Dateiname;
$ r-> path = $ path;
$ r-> img = '<img src = "'. $ path. $ Dateiname. '" />';
echo json_encode ($ r);
Funktionsbildung ($ Source, $ destination, $ width = 0, $ height = 0, $ crop = false, $ quality = 80) {
$ Qualität = $ Qualität? $ Qualität: 80;
$ image = ImageCreateFromString ($ Source);
if ($ image) {
// Dimensionen erhalten
$ w = imagesX ($ image);
$ h = bilderss ($ image);
if (($ width && $ w> $ width) || ($ HEIGE && $ H> $ HEIGE)) {
$ Ratio = $ w / $ H;
if (($ Ratio> = 1 || $ height == 0) && $ width &&! $ crop) {
$ new_height = $ width / $ Ratio;
$ new_width = $ width;
} elseif ($ crop && $ Ratio <= ($ width / $ hohe)) {
$ new_height = $ width / $ Ratio;
$ new_width = $ width;
} anders {
$ new_width = $ height * $ Ratio;
$ new_height = $ height;
}
} anders {
$ new_width = $ w;
$ new_height = $ h;
}
$ x_mid = $ new_width *.5; // Horizontale Mitte
$ y_mid = $ new_height *.5; // vertikale Mitte
// Wiederproben
ERROR_LOG ('Höhe:'. $ new_height. ' - width:'. $ new_width);
$ new = imageCreatTueColor (rund ($ new_width), rund ($ new_height));
ImageCopyReSampled ($ new, $ image, 0, 0, 0, $ new_width, $ new_height, $ w, $ h);
// Ernte
if ($ crop) {
$ crop = imageCreatetRueColor ($ width? $ width: $ new_width, $ height?
ImageCopyReSampled ($ crop, $ new, 0, 0, ($ x_mid - ($ width * 0,5)), 0, $ width, $ height, $ width, $ height);
// ($ y_mid - ($ height *.5))
}
// Ausgabe
// Zwischenstörungen aktivieren [für progressives JPEG]
ImageInterlace ($ crop? $ crop: $ new, true);
$ dext = strtolower (pathInfo ($ destination, pathInfo_extension));
if ($ dext == '') {
$ dext = $ ext;
$ destination. = '.' . $ ext;
}
Switch ($ Dext) {
Fall 'JPEG':
Fall 'JPG':
ImageJPEG ($ CROP?
brechen;
Fall 'PNG':
$ pngQuality = ($ quality - 100) / 11.111111;
$ pngQuality = rund (ABS ($ pngQuality));
ImagePng ($ crop? $ crop: $ new, $ destination, $ pngQuality);
brechen;
Fall 'GIF':
ImageGif ($ crop? $ crop: $ new, $ destination);
brechen;
}
@ImagedStroy ($ image);
@imagedestroy ($ New);
@imagedestroy ($ crop);
}
}
PHP wird schließlich ein JSON -Formatarray zurückgeben. Die Informationen, die ich zurückgibt, sind die Bildadresse, den Namen und der HTML -Code von IMG. Schließlich wird das JSON -Array auf JS erhalten und verarbeitet. Zu diesem Zeitpunkt ist die Operation vorbei.
Zu Beginn des Artikels haben wir auch erwähnt, dass wir auch klicken, um Datei -Upload- und Netzwerkbilder auszuwählen, da diese beiden nicht im Rahmen dieses Themas liegen, sodass wir nicht darüber sprechen. Außerdem sind diese beiden Funktionen nicht mühsam zu implementieren.
Demo -Download