Comment implémenter le téléchargement de fichiers par glisser-déposer-js tutoriel-php.cn

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

一个新手

Libérer： 2017-10-19 09:13:48

original

3374 Les gens l'ont consulté

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(); 
        } 
    });

Copier après la connexion

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();})

Copier après la connexion

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)

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>

Copier après la connexion

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
                }               
            },

Copier après la connexion

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!