日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

本文轉(zhuǎn)載自微信公眾號(hào)「全棧修仙之路」，作者阿寶哥 。轉(zhuǎn)載本文請(qǐng)聯(lián)系全棧修仙之路公眾號(hào)。

專(zhuān)注于為中小企業(yè)提供網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)汪清免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了成百上千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

在日常工作中，文件上傳是一個(gè)很常見(jiàn)的功能。在項(xiàng)目開(kāi)發(fā)過(guò)程中，我們通常都會(huì)使用一些成熟的上傳組件來(lái)實(shí)現(xiàn)對(duì)應(yīng)的功能。一般來(lái)說(shuō)，成熟的上傳組件不僅會(huì)提供漂亮 UI 或好的交互體驗(yàn)，而且還會(huì)提供多種不同的上傳方式，以滿(mǎn)足不同的場(chǎng)景需求。

一般在我們工作中，主要會(huì)涉及到 8 種文件上傳的場(chǎng)景，每一種場(chǎng)景背后都使用不同的技術(shù)，其中也有很多細(xì)節(jié)需要我們額外注意。今天阿寶哥就來(lái)帶大家總結(jié)一下這 8 種場(chǎng)景，讓大家能更好地理解成熟上傳組件所提供的功能。閱讀本文后，你將會(huì)了解以下的內(nèi)容：

• 單文件上傳：利用 input 元素的 accept 屬性限制上傳文件的類(lèi)型、利用 JS 檢測(cè)文件的類(lèi)型及使用 Koa 實(shí)現(xiàn)單文件上傳的功能;
• 多文件上傳：利用 input 元素的 multiple 屬性支持選擇多文件及使用 Koa 實(shí)現(xiàn)多文件上傳的功能;
• 目錄上傳：利用 input 元素上的 webkitdirectory 屬性支持目錄上傳的功能及使用 Koa 實(shí)現(xiàn)目錄上傳并按文件目錄結(jié)構(gòu)存放的功能;
• 壓縮目錄上傳：在目錄上傳的基礎(chǔ)上，利用 JSZip 實(shí)現(xiàn)壓縮目錄上傳的功能;
• 拖拽上傳：利用拖拽事件和 DataTransfer 對(duì)象實(shí)現(xiàn)拖拽上傳的功能;
• 剪貼板上傳：利用剪貼板事件和 Clipboard API 實(shí)現(xiàn)剪貼板上傳的功能;
• 大文件分塊上傳：利用 Blob.slice、SparkMD5 和第三方庫(kù) async-pool 實(shí)現(xiàn)大文件并發(fā)上傳的功能;
• 服務(wù)端上傳：利用第三方庫(kù) form-data 實(shí)現(xiàn)服務(wù)端文件流式上傳的功能。

一、單文件上傳

對(duì)于單文件上傳的場(chǎng)景來(lái)說(shuō)，最常見(jiàn)的是圖片上傳的場(chǎng)景，所以我們就以圖片上傳為例，先來(lái)介紹單文件上傳的基本流程。

1.1 前端代碼

html

在以下代碼中，我們通過(guò) input 元素的 accept 屬性限制了上傳文件的類(lèi)型。這里使用 image/* 限制只能選擇圖片文件，當(dāng)然你也可以設(shè)置特定的類(lèi)型，比如 image/png 或 image/png,image/jpeg。

 
 
 
 

  
  
  
  
 
  
  
  
  
上傳文件 
 
 
 
 

需要注意的是，雖然我們把 input 元素的 accept 屬性設(shè)置為 image/png。但如果用戶(hù)把 jpg/jpeg 格式的圖片后綴名改為 .png，就可以成功繞過(guò)這個(gè)限制。要解決這個(gè)問(wèn)題，我們可以通過(guò)讀取文件中的二進(jìn)制數(shù)據(jù)來(lái)識(shí)別正確的文件類(lèi)型。

要查看圖片對(duì)應(yīng)的二進(jìn)制數(shù)據(jù)，我們可以借助一些現(xiàn)成的編輯器，比如 Windows 平臺(tái)下的 WinHex 或 macOS 平臺(tái)下的 Synalyze It! Pro 十六進(jìn)制編輯器。這里我們使用 Synalyze It! Pro 這個(gè)編輯器，來(lái)查看阿寶哥頭像對(duì)應(yīng)的二進(jìn)制數(shù)據(jù)。

那么在前端能否不借助工具，讀取文件的二進(jìn)制數(shù)據(jù)呢?答案是可以的，這里阿寶哥就不展開(kāi)介紹了。感興趣的話(huà)，你可以閱讀 JavaScript 如何檢測(cè)文件的類(lèi)型? 這篇文章。另外，需要注意的是 input 元素 accept 屬性有存在兼容性問(wèn)題。比如 IE 9 以下不支持，具體如下圖所示：

(圖片來(lái)源 —— https://caniuse.com/input-file-accept)

js

 
 
 
 

  
  
  
  
const uploadFileEle = document.querySelector("#uploadFile"); 
  
  
  
  
 
  
  
  
  
const request = axios.create({ 
  
  
  
  
  baseURL: "http://localhost:3000/upload", 
  
  
  
  
  timeout: 60000,  
  
  
  
  
}); 
  
  
  
  
 
  
  
  
  
async function uploadFile() { 
  
  
  
  
  if (!uploadFileEle.files.length) return; 
  
  
  
  
  const file = uploadFileEle.files[0]; // 獲取單個(gè)文件 
  
  
  
  
  // 省略文件的校驗(yàn)過(guò)程，比如文件類(lèi)型、大小校驗(yàn) 
  
  
  
  
  upload({ 
  
  
  
  
    url: "/single", 
  
  
  
  
    file, 
  
  
  
  
  }); 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
function upload({ url, file, fieldName = "file" }) { 
  
  
  
  
  let formData = new FormData(); 
  
  
  
  
  formData.set(fieldName, file); 
  
  
  
  
  request.post(url, formData, { 
  
  
  
  
    // 監(jiān)聽(tīng)上傳進(jìn)度 
  
  
  
  
    onUploadProgress: function (progressEvent) { 
  
  
  
  
      const percentCompleted = Math.round( 
  
  
  
  
        (progressEvent.loaded * 100) / progressEvent.total 
  
  
  
  
      ); 
  
  
  
  
      console.log(percentCompleted); 
  
  
  
  
     }, 
  
  
  
  
  }); 
  
  
  
  
} 
 
 
 
 

在以上代碼中，我們先把讀取的 File 對(duì)象封裝成 FormData 對(duì)象，然后利用 Axios 實(shí)例的 post 方法實(shí)現(xiàn)文件上傳的功能。在上傳前，通過(guò)設(shè)置請(qǐng)求配置對(duì)象的 onUploadProgress 屬性，就可以獲取文件的上傳進(jìn)度。

1.2 服務(wù)端代碼

Koa 是一個(gè)簡(jiǎn)單易用的 Web 框架，它的特點(diǎn)是優(yōu)雅、簡(jiǎn)潔、輕量、自由度高。所以我們選擇它來(lái)搭建文件服務(wù)，并使用以下中間件來(lái)實(shí)現(xiàn)相應(yīng)的功能：

• koa-static：處理靜態(tài)資源的中間件;
• @koa/cors：處理跨域請(qǐng)求的中間件;
• @koa/multer：處理 multipart/form-data 的中間件;
• @koa/router：處理路由的中間件。

 
 
 
 

  
  
  
  
const path = require("path"); 
  
  
  
  
const Koa = require("koa"); 
  
  
  
  
const serve = require("koa-static"); 
  
  
  
  
const cors = require("@koa/cors"); 
  
  
  
  
const multer = require("@koa/multer"); 
  
  
  
  
const Router = require("@koa/router"); 
  
  
  
  
 
  
  
  
  
const app = new Koa(); 
  
  
  
  
const router = new Router(); 
  
  
  
  
const PORT = 3000; 
  
  
  
  
// 上傳后資源的URL地址 
  
  
  
  
const RESOURCE_URL = `http://localhost:${PORT}`; 
  
  
  
  
// 存儲(chǔ)上傳文件的目錄 
  
  
  
  
const UPLOAD_DIR = path.join(__dirname, "/public/upload"); 
  
  
  
  
 
  
  
  
  
const storage = multer.diskStorage({ 
  
  
  
  
  destination: async function (req, file, cb) { 
  
  
  
  
    // 設(shè)置文件的存儲(chǔ)目錄 
  
  
  
  
    cb(null, UPLOAD_DIR); 
  
  
  
  
  }, 
  
  
  
  
  filename: function (req, file, cb) { 
  
  
  
  
    // 設(shè)置文件名 
  
  
  
  
    cb(null, `${file.originalname}`); 
  
  
  
  
  }, 
  
  
  
  
}); 
  
  
  
  
 
  
  
  
  
const multerUpload = multer({ storage }); 
  
  
  
  
 
  
  
  
  
router.get("/", async (ctx) => { 
  
  
  
  
  ctx.body = "歡迎使用文件服務(wù)（by 阿寶哥）"; 
  
  
  
  
}); 
  
  
  
  
 
  
  
  
  
router.post( 
  
  
  
  
  "/upload/single", 
  
  
  
  
  async (ctx, next) => { 
  
  
  
  
    try { 
  
  
  
  
      await next(); 
  
  
  
  
      ctx.body = { 
  
  
  
  
        code: 1, 
  
  
  
  
        msg: "文件上傳成功", 
  
  
  
  
        url: `${RESOURCE_URL}/${ctx.file.originalname}`, 
  
  
  
  
      }; 
  
  
  
  
    } catch (error) { 
  
  
  
  
      ctx.body = { 
  
  
  
  
        code: 0, 
  
  
  
  
        msg: "文件上傳失敗" 
  
  
  
  
      }; 
  
  
  
  
    } 
  
  
  
  
  }, 
  
  
  
  
  multerUpload.single("file") 
  
  
  
  
); 
  
  
  
  
 
  
  
  
  
// 注冊(cè)中間件 
  
  
  
  
app.use(cors()); 
  
  
  
  
app.use(serve(UPLOAD_DIR)); 
  
  
  
  
app.use(router.routes()).use(router.allowedMethods()); 
  
  
  
  
 
  
  
  
  
app.listen(PORT, () => { 
  
  
  
  
  console.log(`app starting at port ${PORT}`); 
  
  
  
  
}); 
 
 
 
 

以上代碼相對(duì)比較簡(jiǎn)單，我們就不展開(kāi)介紹了。Koa 內(nèi)核很簡(jiǎn)潔，擴(kuò)展功能都是通過(guò)中間件來(lái)實(shí)現(xiàn)。比如示例中使用到的路由、CORS、靜態(tài)資源處理等功能都是通過(guò)中間件實(shí)現(xiàn)。因此要想掌握 Koa 這個(gè)框架，核心是掌握它的中間件機(jī)制。如果你想深入了解的話(huà)，可以閱讀 如何更好地理解中間件和洋蔥模型 這篇文章。其實(shí)除了單文件上傳外，在文件上傳的場(chǎng)景中，我們也可以同時(shí)上傳多個(gè)文件。

單文件上傳示例：single-file-upload

https://github.com/semlinker/file-upload-demos/tree/master/single-file-upload

二、多文件上傳

要上傳多個(gè)文件，首先我們需要允許用戶(hù)同時(shí)選擇多個(gè)文件。要實(shí)現(xiàn)這個(gè)功能，我們可以利用 input 元素的 multiple 屬性。跟前面介紹的 accept 屬性一樣，該屬性也存在兼容性問(wèn)題，具體如下圖所示：

(圖片來(lái)源 —— https://caniuse.com/mdn-api_htmlinputelement_multiple)

2.1 前端代碼

html

相比單文件上傳的代碼，多文件上傳場(chǎng)景下的 input 元素多了一個(gè) multiple 屬性：

 
 
 
 

  
  
  
  
 
  
  
  
  
上傳文件 
 
 
 
 

js

在單文件上傳的代碼中，我們通過(guò) uploadFileEle.files[0] 獲取單個(gè)文件，而對(duì)于多文件上傳來(lái)說(shuō)，我們需要獲取已選擇的文件列表，即通過(guò) uploadFileEle.files 來(lái)獲取，它返回的是一個(gè) FileList 對(duì)象。

 
 
 
 

  
  
  
  
async function uploadFile() { 
  
  
  
  
  if (!uploadFileEle.files.length) return; 
  
  
  
  
  const files = Array.from(uploadFileEle.files); 
  
  
  
  
  upload({ 
  
  
  
  
    url: "/multiple", 
  
  
  
  
    files, 
  
  
  
  
  }); 
  
  
  
  
} 
 
 
 
 

因?yàn)橐С稚蟼鞫鄠€(gè)文件，所以我們需要同步更新一下 upload 函數(shù)。對(duì)應(yīng)的處理邏輯就是遍歷文件列表，然后使用 FormData 對(duì)象的 append 方法來(lái)添加多個(gè)文件，具體代碼如下所示：

 
 
 
 

  
  
  
  
function upload({ url, files, fieldName = "file" }) { 
  
  
  
  
  let formData = new FormData(); 
  
  
  
  
  files.forEach((file) => { 
  
  
  
  
    formData.append(fieldName, file); 
  
  
  
  
  }); 
  
  
  
  
  request.post(url, formData, { 
  
  
  
  
    // 監(jiān)聽(tīng)上傳進(jìn)度 
  
  
  
  
    onUploadProgress: function (progressEvent) { 
  
  
  
  
      const percentCompleted = Math.round( 
  
  
  
  
        (progressEvent.loaded * 100) / progressEvent.total 
  
  
  
  
      ); 
  
  
  
  
      console.log(percentCompleted); 
  
  
  
  
    }, 
  
  
  
  
  }); 
  
  
  
  
} 
 
 
 
 

2.2 服務(wù)端代碼

在以下代碼中，我們定義了一個(gè)新的路由 —— /upload/multiple 來(lái)處理多文件上傳的功能。當(dāng)所有文件都成功上傳后，就會(huì)返回一個(gè)已上傳文件的 url 地址列表：

 
 
 
 

  
  
  
  
router.post( 
  
  
  
  
  "/upload/multiple", 
  
  
  
  
  async (ctx, next) => { 
  
  
  
  
    try { 
  
  
  
  
      await next(); 
  
  
  
  
      urls = ctx.files.file.map(file => `${RESOURCE_URL}/${file.originalname}`); 
  
  
  
  
      ctx.body = { 
  
  
  
  
        code: 1, 
  
  
  
  
        msg: "文件上傳成功", 
  
  
  
  
        urls 
  
  
  
  
      }; 
  
  
  
  
    } catch (error) { 
  
  
  
  
      ctx.body = { 
  
  
  
  
        code: 0, 
  
  
  
  
        msg: "文件上傳失敗", 
  
  
  
  
      }; 
  
  
  
  
    } 
  
  
  
  
  }, 
  
  
  
  
  multerUpload.fields([ 
  
  
  
  
    { 
  
  
  
  
      name: "file", // 與FormData表單項(xiàng)的fieldName相對(duì)應(yīng) 
  
  
  
  
    }, 
  
  
  
  
  ]) 
  
  
  
  
); 
 
 
 
 

介紹完單文件和多文件上傳的功能，接下來(lái)我們來(lái)介紹目錄上傳的功能。

多文件上傳示例：multiple-file-upload

https://github.com/semlinker/file-upload-demos/tree/master/multiple-file-upload

三、目錄上傳

可能你還不知道，input 元素上還有一個(gè)的 webkitdirectory 屬性。當(dāng)設(shè)置了 webkitdirectory 屬性之后，我們就可以選擇目錄了。

當(dāng)我們選擇了指定目錄之后，比如阿寶哥桌面上的 images 目錄，就會(huì)顯示以下確認(rèn)框：

點(diǎn)擊上傳按鈕之后，我們就可以獲取文件列表。列表中的文件對(duì)象上含有一個(gè) webkitRelativePath 屬性，用于表示當(dāng)前文件的相對(duì)路徑。

雖然通過(guò) webkitdirectory 屬性可以很容易地實(shí)現(xiàn)選擇目錄的功能，但在實(shí)際項(xiàng)目中我們還需要考慮它的兼容性。比如在 IE 11 以下的版本就不支持該屬性，其它瀏覽器的兼容性如下圖所示：

(圖片來(lái)源 —— https://caniuse.com/?search=webkitdirectory)

了解完 webkitdirectory 屬性的兼容性，我們先來(lái)介紹前端的實(shí)現(xiàn)代碼。

3.1 前端代碼

為了讓服務(wù)端能按照實(shí)際的目錄結(jié)構(gòu)來(lái)存放對(duì)應(yīng)的文件，在添加表單項(xiàng)時(shí)我們需要把當(dāng)前文件的路徑提交到服務(wù)端。此外，為了確保@koa/multer 能正確處理文件的路徑，我們需要對(duì)路徑進(jìn)行特殊處理。即把 / 斜杠替換為 @ 符號(hào)。對(duì)應(yīng)的處理方式如下所示：

 
 
 
 

  
  
  
  
function upload({ url, files, fieldName = "file" }) { 
  
  
  
  
  let formData = new FormData(); 
  
  
  
  
  files.forEach((file, i) => { 
  
  
  
  
    formData.append( 
  
  
  
  
      fieldName,  
  
  
  
  
      files[i], 
  
  
  
  
      files[i].webkitRelativePath.replace(/\//g, "@"); 
  
  
  
  
    ); 
  
  
  
  
  }); 
  
  
  
  
  request.post(url, formData); // 省略上傳進(jìn)度處理 
  
  
  
  
} 
 
 
 
 

3.2 服務(wù)端代碼

目錄上傳與多文件上傳，服務(wù)端代碼的主要區(qū)別就是 @koa/multer 中間件的配置對(duì)象不一樣。在 destination 屬性對(duì)應(yīng)的函數(shù)中，我們需要把文件名中 @ 還原成 /，然后根據(jù)文件的實(shí)際路徑來(lái)生成目錄。

 
 
 
 

  
  
  
  
const fse = require("fs-extra"); 
  
  
  
  
const storage = multer.diskStorage({ 
  
  
  
  
  destination: async function (req, file, cb) { 
  
  
  
  
    // images@image-1.jpeg => images/image-1.jpeg 
  
  
  
  
    let relativePath = file.originalname.replace(/@/g, path.sep); 
  
  
  
  
    let index = relativePath.lastIndexOf(path.sep); 
  
  
  
  
    let fileDir = path.join(UPLOAD_DIR, relativePath.substr(0, index)); 
  
  
  
  
    // 確保文件目錄存在，若不存在的話(huà)，會(huì)自動(dòng)創(chuàng)建 
  
  
  
  
    await fse.ensureDir(fileDir);  
  
  
  
  
    cb(null, fileDir); 
  
  
  
  
  }, 
  
  
  
  
  filename: function (req, file, cb) { 
  
  
  
  
    let parts = file.originalname.split("@"); 
  
  
  
  
    cb(null, `${parts[parts.length - 1]}`);  
  
  
  
  
  }, 
  
  
  
  
}); 
 
 
 
 

現(xiàn)在我們已經(jīng)實(shí)現(xiàn)了目錄上傳的功能，那么能否把目錄下的文件壓縮成一個(gè)壓縮包后再上傳呢?答案是可以的，接下來(lái)我們來(lái)介紹如何實(shí)現(xiàn)壓縮目錄上傳的功能。

目錄上傳示例：directory-upload

https://github.com/semlinker/file-upload-demos/tree/master/directory-upload

四、壓縮目錄上傳

在 JavaScript 如何在線解壓 ZIP 文件? 這篇文章中，介紹了在瀏覽器端如何使用 JSZip 這個(gè)庫(kù)實(shí)現(xiàn)在線解壓 ZIP 文件的功能。JSZip 這個(gè)庫(kù)除了可以解析 ZIP 文件之外，它還可以用來(lái) 創(chuàng)建和編輯 ZIP 文件。利用 JSZip 這個(gè)庫(kù)提供的 API，我們就可以把目錄下的所有文件壓縮成 ZIP 文件，然后再把生成的 ZIP 文件上傳到服務(wù)器。

4.1 前端代碼

JSZip 實(shí)例上的 file(name, data [,options]) 方法，可以把文件添加到 ZIP 文件中?；谠摲椒ㄎ覀兛梢苑庋b了一個(gè) generateZipFile 函數(shù)，用于把目錄下的文件列表壓縮成一個(gè) ZIP 文件。以下是 generateZipFile 函數(shù)的具體實(shí)現(xiàn)：

 
 
 
 

  
  
  
  
function generateZipFile( 
  
  
  
  
  zipName, files, 
  
  
  
  
  options = { type: "blob", compression: "DEFLATE" } 
  
  
  
  
) { 
  
  
  
  
  return new Promise((resolve, reject) => { 
  
  
  
  
    const zip = new JSZip(); 
  
  
  
  
    for (let i = 0; i < files.length; i++) { 
  
  
  
  
      zip.file(files[i].webkitRelativePath, files[i]); 
  
  
  
  
    } 
  
  
  
  
    zip.generateAsync(options).then(function (blob) { 
  
  
  
  
      zipName = zipName || Date.now() + ".zip"; 
  
  
  
  
      const zipFile = new File([blob], zipName, { 
  
  
  
  
        type: "application/zip", 
  
  
  
  
      }); 
  
  
  
  
      resolve(zipFile); 
  
  
  
  
    }); 
  
  
  
  
  }); 
  
  
  
  
} 
 
 
 
 

在創(chuàng)建完 generateZipFile 函數(shù)之后，我們需要更新一下前面已經(jīng)介紹過(guò)的 uploadFile 函數(shù)：

 
 
 
 

  
  
  
  
async function uploadFile() { 
  
  
  
  
  let fileList = uploadFileEle.files; 
  
  
  
  
  if (!fileList.length) return; 
  
  
  
  
  let webkitRelativePath = fileList[0].webkitRelativePath; 
  
  
  
  
  let zipFileName = webkitRelativePath.split("/")[0] + ".zip"; 
  
  
  
  
  let zipFile = await generateZipFile(zipFileName, fileList); 
  
  
  
  
  upload({ 
  
  
  
  
    url: "/single", 
  
  
  
  
    file: zipFile, 
  
  
  
  
    fileName: zipFileName 
  
  
  
  
  }); 
  
  
  
  
} 
 
 
 
 

在以上的 uploadFile 函數(shù)中，我們會(huì)對(duì)返回的 FileList 對(duì)象進(jìn)行處理，即調(diào)用 generateZipFile 函數(shù)來(lái)生成 ZIP 文件。此外，為了在服務(wù)端接收壓縮文件時(shí)，能獲取到文件名，我們?yōu)?upload 函數(shù)增加了一個(gè) fileName 參數(shù)，該參數(shù)用于調(diào)用 formData.append 方法時(shí)，設(shè)置上傳文件的文件名：

 
 
 
 

  
  
  
  
function upload({ url, file, fileName, fieldName = "file" }) { 
  
  
  
  
  if (!url || !file) return; 
  
  
  
  
  let formData = new FormData(); 
  
  
  
  
  formData.append( 
  
  
  
  
    fieldName, file, fileName 
  
  
  
  
  ); 
  
  
  
  
  request.post(url, formData); // 省略上傳進(jìn)度跟蹤 
  
  
  
  
} 
 
 
 
 

以上就是壓縮目錄上傳，前端部分的 JS 代碼，服務(wù)端的代碼可以參考前面單文件上傳的相關(guān)代碼。

壓縮目錄上傳示例：directory-compress-upload

https://github.com/semlinker/file-upload-demos/tree/master/directory-compress-upload

五、拖拽上傳

要實(shí)現(xiàn)拖拽上傳的功能，我們需要先了解與拖拽相關(guān)的事件。比如 drag、dragend、dragenter、dragover 或 drop 事件等。這里我們只介紹接下來(lái)要用到的拖拽事件：

• dragenter：當(dāng)拖拽元素或選中的文本到一個(gè)可釋放目標(biāo)時(shí)觸發(fā);
• dragover：當(dāng)元素或選中的文本被拖到一個(gè)可釋放目標(biāo)上時(shí)觸發(fā)(每100毫秒觸發(fā)一次);
• dragleave：當(dāng)拖拽元素或選中的文本離開(kāi)一個(gè)可釋放目標(biāo)時(shí)觸發(fā);
• drop：當(dāng)元素或選中的文本在可釋放目標(biāo)上被釋放時(shí)觸發(fā)。

基于上面的這些事件，我們就可以提高用戶(hù)拖拽的體驗(yàn)。比如當(dāng)用戶(hù)拖拽的元素進(jìn)入目標(biāo)區(qū)域時(shí)，對(duì)目標(biāo)區(qū)域進(jìn)行高亮顯示。當(dāng)用戶(hù)拖拽的元素離開(kāi)目標(biāo)區(qū)域時(shí)，移除高亮顯示。很明顯當(dāng) drop 事件觸發(fā)后，拖拽的元素已經(jīng)放入目標(biāo)區(qū)域了，這時(shí)我們就需要獲取對(duì)應(yīng)的數(shù)據(jù)。

那么如何獲取拖拽對(duì)應(yīng)的數(shù)據(jù)呢?這時(shí)我們需要使用 DataTransfer 對(duì)象，該對(duì)象用于保存拖動(dòng)并放下過(guò)程中的數(shù)據(jù)。它可以保存一項(xiàng)或多項(xiàng)數(shù)據(jù)，這些數(shù)據(jù)項(xiàng)可以是一種或者多種數(shù)據(jù)類(lèi)型。若拖動(dòng)操作涉及拖動(dòng)文件，則我們可以通過(guò) DataTransfer 對(duì)象的 files 屬性來(lái)獲取文件列表。

介紹完拖拽上傳相關(guān)的知識(shí)后，我們來(lái)看一下具體如何實(shí)現(xiàn)拖拽上傳的功能。

5.1 前端代碼

html

  
 
 
 

   
  
  
  
 
   
  
  
  
   
拖拽上傳文件