React JS 中的拖放檔案功能

拖放介面使網路應用程式能夠允許使用者將檔案拖放到網頁上。在本文中，我們將瞭解應用程式如何接受從底層平臺的檔案管理器拖放到網頁上的一個或多個檔案。在這裡，我們將使用react-dropzone包。讓我們開始吧。

示例

首先，建立一個 React 專案 -

npx create-react-app newproject

轉到專案目錄 -

cd newproject

現在下載並安裝react-dropzone包 -

npm i --save react-dropzone

我們將使用此庫在 React 元素區域內新增一個可放置區域。這也被用於新增檔案選擇區域。

在本例中，我們將使用拖放功能將檔名稱新增到列表中。在App.js中插入以下程式碼行 -

import React from "react";
import { useDropzone } from "react-dropzone";
function Basic(props) {
   const { acceptedFiles, getRootProps, getInputProps } =
useDropzone();

   const files = acceptedFiles.map((file) => (
      <li key={file.path}>
         {file.path} - {file.size} bytes
      </li>
   ));
   return (
   <section className="container">
      <div {...getRootProps({ className: "dropzone" })}>
         <input
            {...getInputProps()}
            style={{ backgroundColor: "black", color: "white" }}
         />
         <br />
         <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <aside>
         <h4>Files</h4>
         <ul>{files}</ul>
      </aside>
      </section>
   );
}
export default App

function App() {
   return <Basic />;
}

解釋

我們建立了三個變數 -

  • 第一個變數儲存所有檔案詳細資訊，

  • 第二個變數定義此拖放功能將起作用的區域，並且

  • 第三個變數使輸入欄位可放置。

輸出

執行後，它將產生以下輸出 -

您可以從任何資料夾將檔案拖放到此頁面。它將顯示檔名及其大小。此外，您可以使用“選擇檔案”按鈕開啟資料夾位置並選擇檔案。

更新於: 2021年9月29日

736 次瀏覽

啟動你的職業生涯

透過完成課程獲得認證

開始
廣告