JavaScript拖拽上传功能的实现及原理介绍

最近，小明遇到这样一种情况：在网页中上传文件时偶尔页面会崩溃。小明仔细测试了这种情况，发现之前用的一个文件上传组件有一点缺陷，于是，小明决定自己手写一个，样式如下：

图一是没有上传文件时的样式，图二为上传文件后的样式。虚线部分为放置区域，先来看代码：

html部分

    

      

        
{{ fileName }}
        

          将文件拖拽至此，或
          点此上传
        
      
    

    

      
      选择文件

      提交
    
  

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

js部分

    new Vue({
      el: &＃39;#app&＃39;,
      data () {
        return {
          fileName: &＃39;&＃39;,
          batchFile: &＃39;&＃39;,
          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(&＃39;文件大小不能超过10M&＃39;)
          }

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

          // 清空，防止上传后再上传没有反应
          e.target.value = &＃39;&＃39;
        },
        // 拖拽上传
        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(&＃39;文件大小不能超过10M&＃39;)
          }

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

          let data = new FormData()
          data.append(&＃39;upfile&＃39;, this.batchFile)

          // ajax
        }
      }
    })

核心原理说明

• dragover和drop事件

第一个要说的就是拖拽中的这两个事件，因为这两个事件撑起了拖拽上传的核心功能。
对于拖拽这个动作而言，有二个核心概念，一个是拖拽元素，还一个是放置目标。这里，我只讲放置目标上的事件，对于拖拽元素的事件，请自行查阅。

那对于放置目标，它有什么事件呢？如下：
当某个元素被拖动到一个有效的放置目标上(如上例中虚线区域)时，下列事件会依次发生：
(1) dragenter
(2) dragover
(3) dragleave 或 drop
只要有元素被拖动到放置目标上，就会触发 dragenter 事件（类似于 mouseover 事件）。紧随其后的是 dragover 事件，而且在被拖动的元素还在放置目标的范围内移动时，就会持续触发该事件。如果元素被拖出了放置目标，dragover 事件不再发生，但会触发 dragleave 事件（类似于 mouseout事件）。如果元素被放到了放置目标中，则会触发 drop 事件而不是 dragleave 事件。

对于本例来说，我们只需要关注dragover和drop事件。但是drop事件却有点调皮，你想监听它，还得进行一些处理，因为默认情况下，元素是不允许放置的，在拖动元素经过某些无效放置目标时，可以看到一种特殊的光标（圆环中有一条反斜线），表示不能放置。如下：

所以，我们需要代码e.target.value = &＃39;&＃39;来进行重置处理，这样，每次上传文件都会触发change事件。

以上就是Javascript拖拽上传功能的实现及原理介绍的详细内容，更多请关注 第一PHP社区 其它相关文章！