Maison  >  Article  >  interface Web  >  Comment implémenter le téléchargement de fichiers par glisser-déposer

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

一个新手
一个新手original
2017-10-19 09:13:483317parcourir

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
Comment implémenter le téléchargement de fichiers par glisser-déposer
Par défaut Dans ce cas, il est violet, (Ce style doit donc être supprimé dans les événements drop and Leave)
Comment implémenter le téléchargement de fichiers par glisser-déposer

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn