這篇文章主要介紹JavaScript拖拽上傳功能如何實現(xiàn)，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司服務(wù)項目包括龍?zhí)毒W(wǎng)站建設(shè)、龍?zhí)毒W(wǎng)站制作、龍?zhí)毒W(wǎng)頁制作以及龍?zhí)毒W(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，龍?zhí)毒W(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到龍?zhí)妒》莸牟糠殖鞘?，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

最近，小明遇到這樣一種情況：在網(wǎng)頁中上傳文件時偶爾頁面會崩潰。小明仔細測試了這種情況，發(fā)現(xiàn)之前用的一個文件上傳組件有一點缺陷，于是，小明決定自己手寫一個，樣式如下：

圖一是沒有上傳文件時的樣式，圖二為上傳文件后的樣式。虛線部分為放置區(qū)域，先來看代碼：

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: '#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

          // 清空，防止上傳后再上傳沒有反應(yīng)
          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
        }
      }
    })

核心原理說明

• dragover和drop事件

第一個要說的就是拖拽中的這兩個事件，因為這兩個事件撐起了拖拽上傳的核心功能。
對于拖拽這個動作而言，有二個核心概念，一個是拖拽元素，還一個是放置目標。這里，我只講放置目標上的事件，對于拖拽元素的事件，請自行查閱。

那對于放置目標，它有什么事件呢？如下：
當某個元素被拖動到一個有效的放置目標上(如上例中虛線區(qū)域)時，下列事件會依次發(fā)生：
(1) dragenter
(2) dragover
(3) dragleave 或 drop
只要有元素被拖動到放置目標上，就會觸發(fā) dragenter 事件（類似于 mouseover 事件）。緊隨其后的是 dragover 事件，而且在被拖動的元素還在放置目標的范圍內(nèi)移動時，就會持續(xù)觸發(fā)該事件。如果元素被拖出了放置目標，dragover 事件不再發(fā)生，但會觸發(fā) dragleave 事件（類似于 mouseout事件）。如果元素被放到了放置目標中，則會觸發(fā) drop 事件而不是 dragleave 事件。

對于本例來說，我們只需要關(guān)注dragover和drop事件。但是drop事件卻有點調(diào)皮，你想監(jiān)聽它，還得進行一些處理，因為默認情況下，元素是不允許放置的，在拖動元素經(jīng)過某些無效放置目標時，可以看到一種特殊的光標（圓環(huán)中有一條反斜線），表示不能放置。如下：

如果拖動元素經(jīng)過不允許放置的元素，那無論用戶如何操作，都不會發(fā)生 drop 事件。那怎么辦呢？
我們可以重寫 dragover 事件的默認行為，如上例代碼中的e.preventDefault()。
細心的同學可能要問了，那drop事件中也有e.preventDefault()，去掉行不行呢？大家可以自行試下。

• dataTransfer 對象

可能這個對象看著有些陌生，但是它的作用可不小。比如，你拖動一個圖片到目標區(qū)域，那目標區(qū)域怎么獲取這個圖片的信息呢？就靠它！它是事件對象的一個屬性，用于從被拖動元素向放置目標傳遞字符串格式的數(shù)據(jù)。在本例中，我們可以通過它來獲取拖動中的文件信息。

• input的change事件

這個事件其實有坑的，它有這樣一個特性，即：上傳同一個文件，并不會觸發(fā)change事件，即使該文件內(nèi)容做過修改。
細思極恐！比如，用戶要上傳一個文檔，但是拖拽到虛線區(qū)域后發(fā)現(xiàn)文檔內(nèi)容還需要修改下，他改完后再拖拽該文檔，再提交到服務(wù)器，那么他上傳到服務(wù)器的文檔內(nèi)容卻是未修改之前的！
所以，我們需要代碼e.target.value = ''來進行重置處理，這樣，每次上傳文件都會觸發(fā)change事件。

以上是JavaScript拖拽上傳功能如何實現(xiàn)的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！