react项目中如何打开一个文件夹选择框

顶级博客专家 2020-07-10 04:58:03

网上搜了一下，大多都是 new ActiveXObject("Shell.Application")，可是我在react项目中打开页面时，会报ActiveXObject找不到，各位大佬，还有什么办法能打开一个文件夹选择框，我就是想选择一个文件夹，获取一个路径，以供我后面下载文件时用，大佬们，帮帮迷茫的我！！！！！！！！！！！！！！！！感激不尽！！！！！！！！！！！！！

...全文

5787 5 打赏收藏转发到动态举报

写回复

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

顶级博客专家 2020-07-12

打赏
举报

回复

引用 3 楼浴火_凤凰的回复：

IE浏览器使用这个 https://www.jb51.net/article/18917.htm 如果要兼容的话就是使用两套代码

大佬，加个微信行不，摆脱摆脱

浴火_凤凰 2020-07-12

打赏
举报

回复

IE浏览器使用这个 https://www.jb51.net/article/18917.htm 如果要兼容的话就是使用两套代码

浴火_凤凰 2020-07-12

打赏
举报

回复


<html>

<body>
        
    <input id=b type=file webkitdirectory>
        




    <script type="text/javascript" charset="UTF-8">
        document.querySelector('#b').addEventListener('change', e => {
            for (let entry of e.target.files)
                console.log(entry.name, entry.webkitRelativePath);
        });
    </script>


        
</body>

</html>

Chrome浏览器使用上面的代码

浴火_凤凰 2020-07-12

打赏
举报

回复

ActiveXObject("Shell.Application")是IE Only的东西

顶级博客专家 2020-07-12

打赏
举报

回复

引用 2 楼浴火_凤凰的回复：


<html>

<body>
        
    <input id=b type=file webkitdirectory>
        




    <script type="text/javascript" charset="UTF-8">
        document.querySelector('#b').addEventListener('change', e => {
            for (let entry of e.target.files)
                console.log(entry.name, entry.webkitRelativePath);
        });
    </script>


        
</body>

</html>

Chrome浏览器使用上面的代码

你这个方法最后获取到的也不是完整的路径啊

简单的React挂钩即可打开浏览器文件选择器。欢迎使用use-file-picker:waving_hand:简单的react挂钩即可打开浏览器文件选择器。 Install主页安装npm我use-file-picker使用情况import {useFilePicker} from'use-file-picker'; 函数App（）{const [filesContent，errors，openFileSelector] = useFilePicker（{多个：true，接受：'.ics，.pdf'，}）; 如果（errors.length> 0）返回

react的一个后台管理系统代码，包括左侧导航，各种表格展示。如果你是初学者，那么注意以下步骤： 1. nodejs官网下载安装nodejs 2.将本资源放到nodejs的安装路径下，例如我的在D:\Program Files\nodejs\下 3.解压本资源，选择解压到当前路径下 4.打开windows命令框（快捷键 windows系统键+R可打开），通过cd命令，进入到你解压的文件夹目录下，例如我的是：D:\Program Files\nodejs\react-admin-master ，然后执行npm start启动代码 5. 此时我的电脑会弹出默认的ie浏览器，url显示的是localhost:3006 6.我把我这里出现的http://localhost:3006 ，复制粘贴到我另外一个浏览器，比如火狐浏览器，敲回车，就出现了这个管理系统的展示页面注：我也是借花献佛，分享给大家。来源处没有讲明执行细节，对于react初学者来说，执行比较费劲。我这里做了一些详解。参考来源：https://segmentfault.com/a/1190000009379222

Chrome扩展程序（使用TypeScript + React构建）这个项目是样板项目，可让您使用TypeScript和React快速构建chrome扩展。建造克隆回购 npm i npm run dev可以编译一次，或者npm run watch以watch模式运行dev任务 npm run build以构建生产（最小化）版本安装完成构建上述项目的步骤前往Google Chrome中的chrome：// extensions 选中开发人员模式复选框，单击加载未打包的扩展... ，然后从此存储库中选择dist文件夹

该项目是通过引导的。可用脚本在项目目录中，可以运行： npm start 在开发模式下运行应用程序。打开在浏览器中查看它。如果您进行编辑，则页面将重新加载。您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行器。有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。生成被最小化，并且文件名包括哈希值。您的应用已准备好进行部署！有关更多信息，请参见关于的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！如果您对构建工具和配置选择不满意，则可以随时eject 。此命令将从您的项目中删除单个生成依赖项。相反，它将所有配置文件和传递依赖项（webpack，Babel，ESLint等

通过手动错误处理和钩子React形成可重用的公共组件 Below components are available. 输入复选框单选按钮选择（React选择）文件上传（react-dropzone）日期选择器 (react-datepicker) 创建 React 应用程序入门这个项目是用引导的。可用脚本在项目目录中，您可以运行： yarn start 在开发模式下运行应用程序。打开在浏览器中查看。如果您进行编辑，页面将重新加载。您还将在控制台中看到任何 lint 错误。 yarn test 在交互式观察模式下启动测试运行器。有关更多信息，请参阅有关的部分。 yarn build 将用于生产的应用程序构建到build文件夹。它在生产模式下正确地捆绑了 React 并优化了构建以获得最佳性能。构建被缩小，文件名包括哈希值。您的应用程序已准备好部署

87,921

社区成员

224,619

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章