javascript - Comment récupérer des fichiers en les faisant glisser vers le navigateur?

Question

Si vous cliquez pour télécharger sur la page, vous pouvez cliquer pour obtenir les fichiers[0] dans le fichier d'entrée ;

L'exigence actuelle est de glisser-déposer les images directement du bureau vers le navigateur. Comment récupérer le premier fichier dans files[0] ?

Answer 1

/**
 * 拖拽实现
 */
var dropbox = document.getElementById("dropbox");

dropbox.addEventListener("dragenter", function(e){
    e.stopPropagation();
    e.preventDefault();
}, false);
            
dropbox.addEventListener("dragover", function(e){
    e.stopPropagation();
    e.preventDefault();
}, false);
            
dropbox.addEventListener("drop", function(e){
    e.stopPropagation();
    e.preventDefault();
            
    var dt = e.dataTransfer;
    var files = dt.files;
    
    // files[0]即为第一个文件
      
}, false);

Pour plus de détails, veuillez vous référer à : Sélection de fichiers par opérations de glisser-déposer

Je vous recommande également un exemple que j'ai écrit :
Sélectionner un fichier image - prend en charge trois méthodes de saisie (sélection de la zone de saisie, sélection par glisser-déposer, capture d'écran et collage de trois méthodes de saisie)