Comment implémenter le téléchargement de fichiers par glisser-déposer

Faites glisser et sélectionnez des fichiers

Bloquer les événements par défaut

Quand j'ai commencé, j'ai trouvé un exemple en ligne Cet exemple mentionnait que les événements liés au glisser-déposer devaient être bloqués sur le document. méthode de traitement par défaut pour tous les événements, le code est le suivant :

$(document).on({ 
        dragleave:function(e){    //拖离 
            e.preventDefault(); 
        }, 
        drop:function(e){  //拖后放 
            e.preventDefault(); 
        }, 
        dragenter:function(e){    //拖进 
            e.preventDefault(); 
        }, 
        dragover:function(e){    //拖来拖去 
            e.preventDefault(); 
        } 
    });

En fait, dans notre téléchargement de fichiers, la zone qui accepte le glisser-déposer n'est généralement qu'une petite zone, je l'ai donc simplifié comme suit

$drop.on("dragenter", function (e) {
    e.preventDefault();
    console.log("enter");
    $drop.addClass("hover");});$drop.on("dragleave drop", function (e) {
    e.preventDefault();
    console.log("leave");
    $drop.removeClass("hover");});$drop.on("dragover", function (e) {
    e.preventDefault();})

Et, lors de l'événement d'entrée, un style de survol est ajouté à la zone cible pour mettre en évidence la zone d'acceptation

Par défaut Dans ce cas, il est violet, (Ce style doit donc être supprimé dans les événements drop and Leave)

Traitement des fichiers provenant de différentes sources

Parce que Je dois gérer la zone de saisie et la zone de glisser en même temps, ma structure HTML est la suivante :

             <p class="row" id="dropBox" @drop.prevent="Change($event)">
                <p class="import-data">
                    <button                         
                    :class="{&#39;disabled&#39; : resultMsg.length > 0}"                        class="btn btn-info">
                        <i class="fa fa-cloud-upload text"></i>
                        选择文件                    
                     </button>
                    <span :class="{&#39;error-tips&#39;:isError}">{{msg}}</span>
                    <input                        
                    type="file"                         
                    v-show="resultMsg.length == 0" 
                        @change="Change($event)"                         
                        name="importExcel"                         
                        class="importExcel"                         
                        value="" />
                </p>
                <br>
                <p class="loading" :style="&#39;width:&#39;+loading+&#39;%&#39;"></p>
            </p>

est l'événement drop de #dropBox et le changer l'événement de input En même temps, liez la fonction Change et passez l'objet événement dans la fonction
Ici, j'ai ajouté le modificateur drop à l'événement prevent pour bloquer l'événement par défaut If. l'événement n'est pas bloqué, la zone d'acceptation #dropBox est Le fichier ne peut pas être reçu, et le fichier déclenchera le téléchargement du navigateur (s'il ne peut pas être prévisualisé directement) ou l'aperçu

 ;

            Change:function(ev){
                var e = window.event || ev; 
                var file = e.target.files ? e.target.files[0] : e.dataTransfer.files[0];
                if(!file){
                    vm.msg = "点击选择，或者拖拽填写好数据的excel文件致此";
                    vm.isError = true;
                    return false
                }               
            },

ps : Cacher le code js La logique métier ne parle que de la partie publique Lorsque

accepte le fichier sélectionné par l'utilisateur, utilisez e.target.files comme condition de jugement pour déterminer s'il existe. un fichier sélectionné par saisie Si oui, prenez e.target.files[0], sinon, prenez e.dataTransfer.files[0].
Les propriétés de ces deux objets événementiels sont accrochées par le navigateur sur l'objet événementiel selon différentes situations.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!