Maison >interface Web >js tutoriel >Comment implémenter le téléchargement de fichiers par glisser-déposer
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)
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="{'disabled' : resultMsg.length > 0}" class="btn btn-info"> <i class="fa fa-cloud-upload text"></i> 选择文件 </button> <span :class="{'error-tips':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="'width:'+loading+'%'"></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!