À propos du téléchargement par glisser-déposer js [Un processus de téléchargement par glisser-déposer pour modifier l'avatar]

De nombreux navigateurs modernes prennent désormais en charge les opérations de lecture de fichiers par glisser-déposer, et leurs avantages ne se répéteront plus. Le temps frontal a utilisé le glisser-déposer pour améliorer le processus de téléchargement d'avatars du site Web et a résumé les points clés et l'expérience pratique.

Jetons d'abord un coup d'œil à la vue globale :

1 La zone d'acceptation du glisser-déposer du fichier doit être clairement marquée et doit être la même. aussi grand que possible (en raison de la mise en page). La raison en est que la zone de glisser-déposer de cette interface n'est pas grande. Vous pouvez utiliser une zone en pointillés et d’autres styles pour inciter les utilisateurs à glisser-déposer des fichiers. Il est préférable d’avoir des invites textuelles et des icônes évidentes.

2. Dans l'expérience interactive, lorsqu'un fichier est glissé dans la fenêtre du navigateur, la zone de glisser-déposer peut être utilisée pour changer la couleur d'arrière-plan, etc. pour inviter l'utilisateur à une opération de dépôt.
Code d'implémentation :

doc.bind({ 
'dragenter':function(e){ 
$("#brsbox").addClass("dragbrowse"); 
dropbox.addClass("shine"); 
return false; 
}, 
'dragleave':function(e){ 
dropbox.removeClass("shine"); 
return false; 
}, 
'drop':function(e){ 
stopdft(e);} 
}); 
dropbox.bind({ 
'dragenter':function(e){ 
dropbox.addClass("candrop"); 
stopdft(e);}, 
'dragleave':function(e){ 
dropbox.removeClass("candrop"); 
stopdft(e);}, 
'dragover':function(e){ 
stopdft(e);}, 
'drop':function(e){ 

}

Pour les navigateurs qui ne prennent pas en charge le glisser-déposer :

Malheureusement, certains navigateurs ne prennent pas en charge la lecture des fichiers par glisser-déposer, notamment IE9. Attendez un navigateur plus moderne. Par conséquent, nous devons préparer la navigation et le téléchargement de fichiers ordinaires comme solution de sauvegarde pour les navigateurs qui ne prennent pas en charge le glisser-déposer.
Lorsque la lecture de fichiers par glisser-déposer n'est pas prise en charge, l'interface est la suivante :

Le code pour implémenter la détection est le suivant :

it.detectDragable = function(){ 
filedrag = !!window.FileReader; 
if(!filedrag) return; 
$("#avtcnt").addClass('dragable');

Lors du placement des fichiers Traitement :

Lorsque le fichier est placé dans la zone acceptable, veuillez noter que si le fichier que vous faites glisser et déposez avec la souris est unique ou multiple, le navigateur et le système d'exploitation seront e.dataTransefer.les fichiers transférés entre sont toujours pluriels. C'est-à-dire plusieurs fichiers. Cela signifie également que vous devez parcourir les fichiers transportés par la souris.
Le code est le suivant :

dropdom.addEventListener('drop',function(e){ 
it.handlefile(e.dataTransfer.files); 
stopdft(e);},false); 

}; 

it.handlefile = function(files){ 
var noimg = 0; 
for(var i=0; i<files.length; i++){ 
var file = files[i]; 
if(!file.type.match(/image*/)){ 
noimg ++; 
if(noimg ==files.length){ 
QSL.optTips(&#39;请选择jpg, png, gif 等格式的图片&#39;); 
return false; 
} 
continue; 
} 

var reader = new FileReader(); 
reader.onload = function(e){ 
var img = document.createElement(&#39;img&#39;); 
img.src = reader.result; 
setTimeout(function(){ 
it.imgSize = { 
w:img.width, 
h:img.height 
}; 
},500); 
dropdom.innerHTML=""; 
img.className =&#39;localimg&#39;; 
it.imgData = reader.result; 
dropdom.appendChild(img); 
imagedata.empty().val(reader.result); 
dropbox.addClass("droped"); 
clearner.show(); 
}; 
reader.readAsDataURL(file); 

}

Traitement des fichiers glissés vers le navigateur


Le stopdft(e) sert à empêcher le fonctionnement par défaut du navigateur et à ne pas l'ouvrir avec le document du navigateur. Au lieu de cela, le script gère les fichiers glissés et déposés.
Dans ce processus, nous avons besoin de fichiers image, il est donc pratique d'utiliser l'objet e.dataTransfer.files pour trouver des fichiers de type image.
Sinon, cela vous sera demandé.

Code clé pour la lecture des fichiers :
var reader = new FileReader();


reader.onload = function(e){
var img = document. ('img');
img.src = reader.result;
};
reader.readAsDataURL(file); . Nous avons donc effectué les opérations suivantes
setTimeout(function(){
it.imgSize = {
w:img.width,
h:img.height
};
}, 500);
Bien qu'il soit en train de lire un fichier local, il y a encore un délai pour garantir que l'image est réellement lue. Sinon, les valeurs de largeur et de hauteur risquent de ne pas être obtenues dans certains navigateurs. (Existe-t-il une autre méthode plus simple ? Veuillez le signaler)

Supprimer les images existantes et réinitialiser la zone de déplacement :
Après avoir parcouru et lu les images locales, offrez aux utilisateurs des options de suppression et de réinitialisation. (Il est bien sûr plus facile de télécharger directement)

it.resetDropbox = function(){ 
dropbox.attr("class","dropbox") 
.empty() 
.text("将文件拖拽至此区域"); 
imgData = ''; 
it.imgData = ''; 
it.imgSize = {w:0,h:0}; 
picsub.removeClass("uploading") 
.find("button").removeAttr("disabled") 
.text("上传"); 
imagedata.val(''); 
clearner.hide();

Réinitialiser la zone de glisser-déposer

Le processus de glisser-déposer pour lire les fichiers est fondamentalement terminé ici.
Autres avantages de l'utilisation du glisser-déposer pour lire les fichiers locaux :
Le processus ordinaire de téléchargement et de modification des images est le suivant : sélectionnez l'image - téléchargez l'image - téléchargez l'image avec succès - le serveur renvoie l'effet de navigation du client d'image
Et si vous utilisez le glisser-déposer, la lecture des fichiers locaux peut éviter l'étape de renvoi des images depuis le serveur et utiliser directement les données renvoyées par reader.result.
Cela permet d'économiser le délai de lecture des images à partir du serveur et d'économiser le trafic de données aller-retour. Il suffit donc de confirmer que le téléchargement de l'image côté serveur est réussi et que l'aperçu de l'image peut récupérer les données locales :
Code :

function initImageCrop(url){ 
var t = document.getElementById("target"), 
p = document.getElementById("preview"), 
b = browseImage, 
s = [], 
ts = []; 
if(url=='data'){ 
t.src = b.imgData; 
p.src = b.imgData; 
posImage(b.imgSize.w,b.imgSize.h); 
}else{ 
var cutimg = new Image(); 
cutimg.onload = function(){ 
t.src = url; 
p.src = url; 
posImage(cutimg.width,cutimg.height); 
} 
cutimg.src = url;

Traitement après le téléchargement réussi de l'image

Plus à propos de js drag Téléchargement par glisser-déposer [un processus de téléchargement par glisser-déposer pour modifier les avatars] Pour les articles connexes, veuillez faire attention au site Web PHP chinois !