Implémentation et introduction du principe de la fonction de téléchargement par glisser-déposer JavaScript

Cet article vous présente la mise en œuvre et les principes de la fonction de téléchargement par glisser-déposer JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Récemment, Xiao Ming a rencontré une telle situation : lors du téléchargement de fichiers sur la page Web, la page plantait occasionnellement. Xiao Ming a soigneusement testé cette situation et a découvert qu'un composant de téléchargement de fichiers qu'il avait utilisé auparavant présentait quelques défauts. Xiao Ming a donc décidé d'en écrire un à la main avec le style suivant :

L'image 1 est le style lorsqu'aucun fichier n'est téléchargé, et la figure 2 est le style après le téléchargement des fichiers. La partie en ligne pointillée est la zone de placement. Regardons d'abord le code :

partie html

<div>
    <div>
      <div>
        <div>{{ fileName }}</div>
        <div>
          <span>将文件拖拽至此，或</span>
          <label>点此上传</label>
        </div>
      </div>
    </div>

    <div>
      <input>
      <label>选择文件</label>

      <button>提交</button>
    </div>
  </div>

partie css

    * {
      font-size: 14px;
    }
    .drag-area {
      height: 200px;
      width: 300px;
      border: dashed 1px gray;
      margin-bottom: 10px;
      color: #777;
    }
    .uploader-tips {
      text-align: center;
      height: 200px;
      line-height: 200px;
    }
    .file-name {
      text-align: center;
      height: 200px;
      line-height: 200px;
    }

partie js

    new Vue({
      el: '#app',
      data () {
        return {
          fileName: '',
          batchFile: '',
          MAX_FILE_SIZE: 10 * 1000 * 1000
        }
      },
      methods: {
        // 点击上传
        chooseUploadFile (e) {
          const file = e.target.files.item(0)

          if (!file) return
          if (file.size > this.MAX_FILE_SIZE) {
            return alert('文件大小不能超过10M')
          }

          this.batchFile = file
          this.fileName = file.name

          // 清空，防止上传后再上传没有反应
          e.target.value = ''
        },
        // 拖拽上传
        fileDragover (e) {
          e.preventDefault()
        },
        fileDrop (e) {
          e.preventDefault()
          const file = e.dataTransfer.files[0] // 获取到第一个上传的文件对象

          if (!file) return
          if (file.size > this.MAX_FILE_SIZE) {
            return alert('文件大小不能超过10M')
          }

          this.batchFile = file
          this.fileName = file.name
        },
        // 提交
        uploadOk () {
          if (this.batchFile === '') {
            return alert('请选择要上传的文件')
          }

          let data = new FormData()
          data.append('upfile', this.batchFile)

          // ajax
        }
      }
    })

Explication des principes de base

• événements de glisser-déposer

La première chose dont il faut parler, ce sont ces deux événements en glisser-déposer, car ces deux événements prennent en charge la fonction principale du téléchargement par glisser-déposer.
Pour l'action de glisser, il existe deux concepts de base, l'un est 拖拽元素 et l'autre est 放置目标. Ici, je ne parlerai que des événements sur la cible de dépôt. Pour les événements de l'élément glisser, veuillez le vérifier vous-même.

Quels événements propose-t-il pour placer des cibles ? Comme suit :
Lorsqu'un élément est glissé vers une cible de dépôt valide (telle que la zone en pointillés dans l'exemple ci-dessus), les événements suivants se produiront dans l'ordre :
(1) dragenter
(2) dragover
(3) dragleave ou drop
Tant qu'un élément est glissé vers la cible de dépôt, l'événement dragenter sera déclenché (similaire à l'événement mouseover). L'événement dragover suit immédiatement et continue de se déclencher pendant que l'élément déplacé se déplace dans la cible de dépôt. Si l'élément est glissé en dehors de la cible de dépôt, l'événement dragover ne se produit plus, mais l'événement dragleave est déclenché (similaire à l'événement mouseout). Si l'élément est déposé dans la cible de dépôt, l'événement drop est déclenché à la place de l'événement dragleave.

Pour cet exemple, il suffit de prêter attention aux événements dragover et drop. Mais l'événement drop est un peu méchant. Si vous voulez l'écouter, vous devez effectuer un certain traitement, car par défaut, les éléments ne sont pas autorisés à être placés. Lorsque vous faites glisser un élément au-delà de cibles de placement non valides, vous pouvez voir un message. curseur spécial (il y a une barre oblique inverse dans le cercle), indiquant qu'il ne peut pas être placé. Comme suit :

Si l'élément déplacé transmet un élément dont le placement n'est pas autorisé, quelle que soit la manière dont l'utilisateur opère, l'événement de dépôt ne se produira pas. Ce qu'il faut faire?
Nous pouvons remplacer le comportement par défaut de l'événement dragover, tel que e.preventDefault() dans l'exemple de code ci-dessus.
Les étudiants prudents voudront peut-être demander, il y a aussi e.preventDefault() dans l'événement drop, peut-il être supprimé ? Vous pouvez l'essayer vous-même.

• Objet dataTransfer

Cet objet peut paraître un peu étrange, mais son rôle n'est pas petit. Par exemple, si vous faites glisser une image vers la zone cible, comment la zone cible obtient-elle les informations de l’image ? Fiez-vous simplement à lui ! Il s'agit d'une propriété de l'objet événement qui est utilisée pour transmettre des données au format chaîne de l'élément déplacé vers la cible de dépôt. Dans cet exemple, nous pouvons l'utiliser pour obtenir les informations sur le fichier en cours de déplacement.

• Événement de changement d'entrée

Cet événement est en fait délicat. Il a une telle fonctionnalité, c'est-à-dire que le téléchargement du même fichier ne modifie pas le. événement L'événement de changement sera déclenché même si le contenu du fichier a été modifié.
C'est effrayant d'y penser ! Par exemple, si l'utilisateur souhaite télécharger un document, mais qu'après l'avoir fait glisser vers la zone en pointillé, il constate que le contenu du document doit être modifié. Une fois la modification terminée, il fait glisser le document puis le soumet au serveur. Le contenu du document qu'il télécharge sur le serveur n'est alors pas modifié.
Nous avons donc besoin du code e.target.value = '' pour effectuer le traitement de réinitialisation, afin que l'événement de changement soit déclenché à chaque fois qu'un fichier est téléchargé.

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!