数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究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 次浏览
广告