Parce que le titre est un exemple, je n'expliquerai pas cette fois, car j'ai également reconstitué cet exemple. J'ai fait référence à environ 5 ou 6 plug-ins de glisser-déposer et de démos, puis j'ai choisi les meilleurs, et je suis finalement devenu un tel exemple. Jetons un coup d'œil (l'adresse ne peut être garantie pour être efficace pendant longtemps. Si elle échoue, veuillez cliquer sur la démo à la fin de l'article à télécharger):
Je me réfère à un site Web d'album photo étranger. Les changements ne sont pas beaucoup, mais le style de la chanson d'oiseau est converti en chinois, et le style de téléchargement a également été modifié. La raison du choix est qu'il m'est facile de me développer. Il prend en charge trois façons d'ajouter des images, l'une pour télécharger la glisser-déposer, l'une pour télécharger un fichier ordinaire, et l'autre est d'ajouter des images réseau. Il intègre intelligemment les trois modes de téléchargement et vous pouvez parcourir le navigateur IE. Si HTML5 n'est pas pris en charge, il n'y a pas d'invite pour télécharger des images, comme indiqué dans l'image:
La chose la plus importante à propos du téléchargement de glisser-déposer est le code de partie JS, qui met en œuvre 70% des fonctions, et les 30% restants soumettent simplement les informations de l'image à l'arrière-plan, puis le traitement correspondant, tel que la compression, le recadrage, etc. Voyons d'abord le code d'implémentation JS.
$ (). 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);
},fonction(){
$ (this) .children ('p'). stop (). animate ({top: '- 44px'}, 200);
});
// implémentation de la fonction
$ (document) .on ({
dragleave: fonction (e) {
E.PreventDefault ();
$ ('. Dashboard_target_box'). RemoveClass ('Over');
},
Drop: fonction (e) {
E.PreventDefault ();
//$('.dashboard_target_box').removeclass('over ');
},
DragEnter: fonction (e) {
E.PreventDefault ();
$ ('. Dashboard_target_box'). addClass ('over');
},
dragover: fonction (e) {
E.PreventDefault ();
$ ('. Dashboard_target_box'). addClass ('over');
}
});
var box = document.getElementById ('cible_box');
box.addeventListener ("Drop", fonction (e) {
E.PreventDefault ();
// obtient la liste des fichiers
var fileList = e.datatransfer.files;
var img = document.CreateElement ('img');
// détecter s'il fait glisser le fichier vers la page
if (fileList.length == 0) {
$ ('. Dashboard_target_box'). RemoveClass ('Over');
retour;
}
// détecter si le fichier est une image
if (fileList [0] .type.indexof ('image') === -1) {
$ ('. Dashboard_target_box'). RemoveClass ('Over');
retour;
}
if ($. Browser.safari) {
// chrome8 +
img.src = window.webkiturl.createObjectUrl (fileList [0]);
} else if ($. Browser.mozilla) {
// ff4 +
img.src = window.url.createObjectUrl (fileList [0]);
}autre{
// instancier l'objet de lecteur de fichiers
var Reader = new FileReader ();
reader.onload = fonction (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-requied-with", "xmlhttprequest");
xhr.upload.addeventListener ("Progress", fonction (e) {
$ ("# dtb-msg3"). hide ();
$ ("# dtb-msg4 span"). show ();
$ ("# dtb-msg4"). enfants ('span'). eq (1) .css ({width: '0px'});
$ ('. show'). html ('');
if (e.Lengthcompautable) {
var chargé = math.ceil ((e.loaded / e.total) * 100);
$ ("# dtb-msg4"). enfants ('span'). eq (1) .css ({width: (chargé * 2) + 'px'});
}
}, FAUX);
xhr.addeventListener ("Load", fonction (e) {
$ ('. Dashboard_target_box'). RemoveClass ('Over');
$ ("# dtb-msg3"). show ();
$ ("# dtb-msg4 span"). hide ();
var result = jQuery.Parsejson (e.target.ResponSeText);
alert (result.FileName);
$ ('. show'). Ajouter (result.img);
}, FAUX);
var fd = new formData ();
fd.append ('xfile', fileList [0]);
Xhr.Send (FD);
},FAUX);
}autre{
$ ('# dtb-msg1 .compatible'). hide ();
$ ('# dtb-msg1 .notcompatible'). show ();
}
});
Au début, j'ai d'abord jugé le type de navigateur, car comme je viens de l'introduire, différents navigateurs voient différentes interfaces. L'implémentation principale du code commence par l'implémentation de la fonction. Je ne dirai pas grand-chose sur la raison pour laquelle il fonctionne et quel est le principe. Vous pouvez vous référer à cet article: "Explication détaillée du téléchargement de glisser-déposer sur la page d'accueil de Renren (HTML5 Drag & Drop, FileReder API, FormData)". Cependant, le code de la pièce de téléchargement Ajax est toujours un peu différent, car Renren semble être un peu gênant, donc je trouverai un autre moyen.
Enfin, je télécharge une partie du code PHP. Ici, je fournis juste une référence, vous pouvez l'écrire vous-même en fonction des besoins du projet.
$ r = new stdclass ();
En-tête ('Content-Type: Application / JSON');
$ maxSize = 10; // MB
if ($ _ fichiers ['xfile'] ['size']> ($ maxsize * 1048576)) {
$ r-> error = "La taille de l'image ne dépasse pas $ maxsize mb";
}
$ dossier = 'files /';
if (! is_dir (dossier $)) {
mkdir (dossier $);
}
$ dossier. = $ _post ['dossier']? $ _Post ['dossier']. '/': '';
if (! is_dir (dossier $)) {
mkdir (dossier $);
}
if (preg_match ('/ image / i', $ _files ['xfile'] ['type'])) {
$ filename = $ _post ['value']? $ _POST ['Value']: $ dossier. sha1 (@microtime (). '-'. $ _files ['xfile'] ['name']). '.jpg';
}autre{
$ tld = split (',', $ _files ['xfile'] ['name']);
$ tld = $ tld [count ($ tld) - 1];
$ filename = $ _post ['value']? $ _POST ['Value']: $ dossier. sha1 (@microtime (). '-'. $ _files ['xfile'] ['name']). $ tld;
}
$ types = array ('image / png', 'image / gif', 'image / jpeg');
if (in_array ($ _ fichiers ['xfile'] ['type'], $ types)) {
$ source = file_get_contents ($ _ fichiers ["xfile"] ["tmp_name"]);
ImageReSize ($ source, $ filename, $ _post ['width'], $ _post ['height'], $ _post ['crop'], $ _post ['Quality']);
}autre{
move_uploaded_file ($ _ fichiers ["xfile"] ["tmp_name"], $ filename);
}
$ path = str_replace ('test.php', '', $ _server ['script_name']);
$ r-> filename = $ filename;
$ r-> path = $ path;
$ r-> img = '<img src = "'. $ path. $ nom de fichier. '" />';
echo json_encode ($ r);
Function ImageRereSize ($ Source, $ Destination, $ width = 0, $ height = 0, $ crop = false, $ qualité = 80) {
$ qualité = $ qualité? $ Quality: 80;
$ image = ImageRereateFromString ($ source);
if ($ image) {
// Obtenez des dimensions
$ w = imagesx ($ image);
$ h = images ($ image);
if (($ width && $ w> $ width) || ($ height && $ h> $ height)) {
$ ratio = $ w / $ h;
if (($ ratio> = 1 || $ height == 0) && $ width &&! $ crop) {
$ new_height = $ width / $ ratio;
$ new_width = $ width;
} elseif ($ Crop && $ ratio <= ($ width / $ height)) {
$ new_height = $ width / $ ratio;
$ new_width = $ width;
} autre {
$ new_width = $ height * $ ratio;
$ new_height = $ height;
}
} autre {
$ new_width = $ w;
$ new_height = $ h;
}
$ x_mid = $ new_width * .5; // milieu horizontal
$ y_mid = $ new_height * .5; // Middle vertical
// Resamponner
error_log ('height:'. $ new_height. '- largeur:'. $ new_width);
$ new = ImageCreateTrueColor (Round ($ new_width), Round ($ new_height));
ImageCopyRes échantillon ($ new, $ Image, 0, 0, 0, $ new_width, $ new_height, $ w, $ h);
// Recadrer
if ($ culte) {
$ crop = imageCreateTrueColor ($ width? $ width: $ new_width, $ height? $ height: $ new_height);
ImageCopyRes échantillonné ($ Crop, $ new, 0, 0, ($ x_mid - ($ largeur * .5)), 0, $ width, $ height, $ width, $ height);
// ($ y_mid - ($ height * .5))
}
// Sortir
// Activer l'intervaliseur [pour JPEG progressif]
ImageInterlace ($ crop? $ Crop: $ new, true);
$ dext = strtolower (pathinfo ($ destination, pathinfo_extension));
if ($ dext == '') {
$ dext = $ ext;
$ destination. = '.' . $ ext;
}
Switch ($ Dext) {
cas «jpeg»:
cas «jpg»:
ImageJPEG ($ Crop? $ Crop: $ New, $ Destination, $ Quality);
casser;
cas «png»:
$ pngquality = ($ Quality - 100) / 11.111111;
$ pngquality = round (ABS ($ pngquality));
ImagePng ($ Crop? $ Crop: $ new, $ Destination, $ pngquality);
casser;
cas «gif»:
ImageGif ($ Crop? $ Crop: $ new, $ destination);
casser;
}
@ImageStroy ($ image);
@ImageStroy ($ new);
@ImageStroy ($ Crop);
}
}
PHP rendra éventuellement un tableau de format JSON. Les informations que je retourne sont l'adresse d'image, le nom et le code HTML d'IMG. Enfin, le tableau JSON est obtenu sur JS et traité. À ce stade, l'opération est terminée.
Au début de l'article, nous avons également mentionné que nous cliquons également pour sélectionner le téléchargement de fichiers et les images de réseau, car ces deux-là ne sont pas dans le cadre de ce sujet, nous n'en parlerons donc pas. En outre, ces deux fonctions ne sont pas gênantes à implémenter.
Téléchargement de la démonstration