html5 glisser-déposer télécharger un exemple d'image démonstration_html5 compétences du didacticiel

Parce que le titre parle d'un exemple, je ne l'expliquerai pas cette fois, car j'ai reconstitué cet exemple en me référant à environ 5 ou 6 plug-ins et démos téléchargés par glisser-déposer, puis j'ai mis les meilleurs d'entre eux. . L'endroit a été choisi, et finalement il est devenu un tel exemple. Jetons-y un coup d'œil ensemble (l'adresse ne peut pas être garantie pendant une longue période. Si elle n'est pas valide, veuillez cliquer sur le téléchargement de la démo à la fin de. l'article) :

Je fais référence au style de l'interface. Un site Web d'album photo étranger n'a pas beaucoup changé. Il a simplement converti les chants d'oiseaux en chinois et a changé le style lors du téléchargement. J'ai choisi celui-ci, c'est qu'il est facile pour moi de le développer. Il prend en charge 3 façons d'ajouter des html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticiels. L'une est le téléchargement par glisser-déposer, l'autre est la sélection régulière du téléchargement de fichiers et l'autre consiste à ajouter des html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticiels réseau. Il intègre intelligemment trois modes de téléchargement et vous pouvez le parcourir avec le navigateur IE. S'il ne prend pas en charge HTML5, il n'y a pas d'invite à glisser-déposer pour télécharger des html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticiels, comme le montre l'html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticiel :

. La partie la plus importante du téléchargement par glisser-déposer est la partie js du code, qui implémente 70 % des fonctions. Les 30 % restants servent simplement à soumettre les informations de l'html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticiel en arrière-plan, puis à effectuer le traitement correspondant, tel que la compression. , recadrage, etc. Jetons donc d'abord un coup d'œil au code d'implémentation de js.

Copier le code

Le code est le suivant :

$().ready( function() {
if($.browser.safari || $.browser.mozilla){
$('#dtb-msg1 .compatible').show(); -msg1 . non compatible').hide();
$('#drop_zone_home').hover(function(){
$(this).children('p').stop().animate({ top:' 0px'},200);
},function(){
$(this).children('p').stop().animate({top:'-44px'},200); );
});
//Implémentation de la fonction
$(document).on({
dragleave:function(e){
e.preventDefault();
$( '.dashboard_target_box ').removeClass('over');
},
drop:function(e){
e.preventDefault();
//$('.dashboard_target_box'). removeClass('over');
},
dragenter:function(e){
e.preventDefault();
$('.dashboard_target_box').addClass('over'); 🎜>} ,
dragover:function(e){
e.preventDefault();
$('.dashboard_target_box').addClass('over'); ;
var box = document.getElementById('target_box');
box.addEventListener("drop",function(e){
e.preventDefault();
//Obtenir la liste des fichiers
var fileList = e.dataTransfer.files;
var img = document.createElement('img');
//Détecter s'il s'agit d'une opération de glisser-déposer de fichiers vers la page
if(fileList .length == 0) {
$('.dashboard_target_box').removeClass('over');
return;
}
//Détecter si le fichier est une html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticiel
if (fileList[0].type. indexOf('html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticiel') === -1){
$('.dashboard_target_box').removeClass('over');
return; >if($.browser.safari ){
//Chrome8
img.src = window.webkitURL.createObjectURL(fileList[0]);
}else if($.browser.mozilla){
//FF4
img.src = window.URL.createObjectURL(fileList[0]);
}else{
//Instancier l'objet lecteur de fichier
var reader = new FileReader() ;
reader.onload = function(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("progress", function(e){
$("#dtb-msg3").hide();
$ ("#dtb-msg4 span" ).show();
$("#dtb-msg4").children('span').eq(1).css({width:'0px'});
$('.show ').html('');
if(e.lengthComputable){
var chargé = Math.ceil((e.loaded / e.total) * 100);
$("#dtb -msg4").children('span').eq(1).css({width:(loaded*2) 'px'}
}
}); false);
xhr. addEventListener("load", function(e){
$('.dashboard_target_box').removeClass('over');
$("#dtb-msg3"). show();
$ ("#dtb-msg4 span").hide();
var result = jQuery.parseJSON(e.target.responseText); 🎜>$('.show' ).append(result.img);
}, false);
var fd = new FormData(); ]);
xhr. send(fd);
},false();
$('#dtb-msg1 .compatible').hide(); ('#dtb-msg1 .notcompatible ').show();
}
}

);
Au début, j'ai d'abord déterminé le type de navigateur, car comme mentionné tout à l'heure, différents navigateurs voient différentes interfaces. Le code d'implémentation principal commence à partir de "Implémentation de fonction". Je n'entrerai pas dans les détails sur pourquoi cette opération est effectuée de cette manière et quel en est le principe. Vous pouvez vous référer à cet article : "Explication détaillée du téléchargement par glisser-déposer sur Renren. page d'accueil (Drag&Drop HTML5, API FileReader, formdata)", mais le code pour la partie de téléchargement ajax est encore un peu différent, car celui de Renren semble un peu gênant, alors j'ai cherché un autre moyen.
La dernière partie consiste à télécharger le code PHP. Ici, je fournis juste une référence, vous pouvez l'écrire vous-même en fonction des besoins du projet.

Copier le code

Le code est le suivant :

$r = new stdClass( );
header('content-type: application/json');
$maxsize = 10; //Mb
if($_FILES['xfile']['size'] > ($ maxsize * 1048576 )){
$r->error = "La taille de l'html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticiel ne dépasse pas $maxsize Mo"
}
$folder = 'files/'
if(!is_dir; ($dossier)) {
mkdir($dossier);
}
$dossier .= $_POST['dossier'] ? 🎜>if(! is_dir($folder)){
mkdir($folder);
}
if(preg_match('/html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticiel/i', $_FILES['xfile']['type' ])){
$filename = $_POST['value'] ? $_POST['value'] : $folder sha1(@microtime() . '-' . $_FILES['xfile']['name. ']) ' .jpg';
}else{
$tld = split(',', $_FILES['xfile']['name']); count($tld) - 1];
$filename = $_POST['value'] ? $_POST['value'] : $folder sha1(@microtime() . '-' . $_FILES['xfile. ']['nom ']) . $tld;
}
$types = Array('html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticiel/png', 'html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticiel/gif', 'html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticiel/jpeg'); $_FILES['xfile ']['type'], $types)){
$source = file_get_contents($_FILES["xfile"]["tmp_name"]);
html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticielresize($source, $filename) , $_POST['largeur'], $_POST['hauteur'], $_POST['crop'], $_POST['qualité']);
}else{
move_uploaded_file($_FILES["xfile "]["tmp_name "], $filename);
}
$path = str_replace('test.php', '', $_SERVER['SCRIPT_NAME']);
$r-> nom de fichier = $nom de fichier;
$r->chemin = $chemin
$r->img = '';
echo json_encode($r);
function html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticielresize($source, $destination, $width = 0, $height = 0, $crop = false, $quality = 80) {
$quality = $quality ? $quality : 80;
$html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticiel = html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticielcreatefromstring($source);
if ($html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticiel) {
// Obtenir les dimensions
$w = html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticielsx($html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticiel) );
$h = html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticielsy($html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticiel);
if (($largeur && $w > $width) || ($hauteur && $h > $hauteur)) {
$ratio = $w / $ h;
if (($ratio >= 1 || $height == 0) && $width && !$crop) {
$new_height = $width / $ratio; >$new_width = $ width;
} elseif ($crop && $ratio $new_height = $width / $ratio
$new_width = $width; ;
} else {
$new_width = $height * $ratio;
$new_height = $height;
} else {
$new_width = $w; $new_height = $h ;
}
$x_mid = $new_width * .5; //milieu horizontal
$y_mid = $new_height * .5; //milieu vertical
// rééchantillonner
error_log('height : ' . $new_height . ' - width: ' . $new_width);
$new = html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticielcreatetruecolor(round($new_width), round($new_height)); $html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticiel, 0, 0, 0, 0, $new_width, $new_height, $w, $h);
// Recadrer
if ($crop) {
$crop = html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticielcreatetruecolor($width ? $width : $new_width , $height ? $height : $new_height);
html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticielcopyresampled($crop, $new, 0, 0, ($x_mid - ($width * .5)), 0, $width, $ height, $width, $height);
//($y_mid - ($height * .5))
}
// Sortie
// Activer l'entrelacement [pour JPEG progressif]
html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticielinterlace($crop ? $crop : $new, true);
$dext = strtolower(pathinfo($destination, PATHINFO_EXTENSION));
if ($dext == '') {
$dext = $ext;
$destination .= '.' $ext;
switch ($dext) {
case 'jpeg':
case 'jpg':
html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticieljpeg($crop ? $crop : $new, $destination, $quality);
break;
case 'png':
$pngQuality = ($quality - 100) / 11.111111
$ pngQuality = round(abs ($pngQuality));
html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticielpng($crop ? $crop : $new, $destination, $pngQuality) ;
case 'gif' :
html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticielgif( $crop ? $crop : $new, $destination);
break;
@html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticieldestroy($html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticiel);
@html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticieldestroy($new); );
}
}


PHP finira par renvoyer un tableau au format JSON. Les informations que j'ai renvoyées sont l'adresse de l'html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticiel, le nom et le code html de l'img. Enfin, le tableau json est obtenu et traité en js. est fini.
Comme mentionné au début de l'article, il existe également des téléchargements de fichiers en cliquant pour sélectionner et des html5 glisser-déposer télécharger un exemple dimage démonstration_html5 compétences du didacticiels réseau, étant donné que ces deux éléments n'entrent pas dans le cadre de ce sujet, je n'en parlerai pas. De plus, ces deux fonctions ne sont pas gênantes à mettre en œuvre.
téléchargement de la démo