前端点击下载路径选择

如何在点击下载之后弹窗并出现类似百度网盘的路径选择操作
可是我试过存在浏览器安全策略，获取不到文件地址

写回答
好问题 1 提建议
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

1条回答默认最新

谷雨睡不醒 2022-07-26 09:10

关注

前端页面不同于本地应用，获取的权限相当有限。下载位置由浏览器指定。
之前也许可以通过ActiveXObject之类的实现，现在应该没有人这么做了吧。

本回答被题主选为最佳回答 , 对您是否有帮助呢?

努力当上钱厚端 2024-10-09 05:16

https://img-mid.csdnimg.cn/release/static/image/mid/ask/e97bb1caadad4f74b5ba0798ddd3460a.gif

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>选择保存目录示例</title>
        <style>
            #edit {
                display: none;
            }
        </style>
    </head>
    <body>
        <h2>选择保存目录示例</h2>
        <button id="save" onclick="choosePath()">选择位置</button>
        <button id="edit" onclick="editFile()">修改文件</button>

        <script>
            const saveBTN = document.querySelector("#save");
            const editBTN = document.querySelector("#edit");

            var writable;
            async function choosePath() {
                try {
                    // 打开保存文件对话框     https://developer.mozilla.org/zh-CN/docs/Web/API/Window/showSaveFilePicker
                    const handle = await window.showSaveFilePicker({
                        types: [{
                            description: '文件',
                            accept: {
                                'text/plain': ['.txt'],
                                // 'application/pdf': ['.pdf'],
                                // 'image/jpeg': ['.jpg', '.jpeg'],
                                // 'image/png': ['.png']
                            }
                        }],
                        excludeAcceptAllOption: true
                    });

                    // 创建文件实例
                    writable = await handle.createWritable();
                    createFile();
                } catch (error) {
                    alert('文件保存失败:', error);
                }
            };

            async function createFile() {
                const message = prompt("请输入写入的内容：");
                await writable.write(message);
                alert('文件保存成功');
                saveBTN.style.display = "none";
                editBTN.style.display = "block";
            }

            async function editFile() {
                const message = prompt("请输入修改的内容：");
                await writable.write(message);
                await writable.close();
                alert('文件修改成功');
            }
        </script>
    </body>
</html>

努力当上钱厚端 2024-10-09 05:18

https://img-mid.csdnimg.cn/release/static/image/mid/ask/e97bb1caadad4f74b5ba0798ddd3460a.gif

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>选择保存目录示例</title>
        <style>
            #edit {
                display: none;
            }
        </style>
    </head>
    <body>
        <h2>选择保存目录示例</h2>
        <button id="save" onclick="choosePath()">选择位置</button>
        <button id="edit" onclick="editFile()">修改文件</button>

        <script>
            const saveBTN = document.querySelector("#save");
            const editBTN = document.querySelector("#edit");

            var writable;
            async function choosePath() {
                try {
                    // 打开保存文件对话框     https://developer.mozilla.org/zh-CN/docs/Web/API/Window/showSaveFilePicker
                    const handle = await window.showSaveFilePicker({
                        types: [{
                            description: '文件',
                            accept: {
                                'text/plain': ['.txt'],
                                // 'application/pdf': ['.pdf'],
                                // 'image/jpeg': ['.jpg', '.jpeg'],
                                // 'image/png': ['.png']
                            }
                        }],
                        excludeAcceptAllOption: true
                    });

                    // 创建文件实例
                    writable = await handle.createWritable();
                    createFile();
                } catch (error) {
                    alert('文件保存失败:', error);
                }
            };

            async function createFile() {
                const message = prompt("请输入写入的内容：");
                await writable.write(message);
                alert('文件保存成功');
                saveBTN.style.display = "none";
                editBTN.style.display = "block";
            }

            async function editFile() {
                const message = prompt("请输入修改的内容：");
                await writable.write(message);
                await writable.close();
                alert('文件修改成功');
            }
        </script>
    </body>
</html>

编辑

预览

报告相同问题？

关注问题

应该怎么选择前端学习路径 css html5 javascript
2022-04-19 09:51

回答 4 已采纳基础还是要扎实，学完基础去学习Vue、React等前端框架
Thymeleaf 路径正确前端报404错误 javascript spring boot 前端
2022-10-18 08:24

回答 1 已采纳你看下这篇博客吧, 应该有用👉 ：idea中 thymeleaf 报错无法跳页面404
关于前端vue中导入文件获取文件的绝对路径 elementui javascript 前端有问必答
2021-11-27 01:11

回答 2 已采纳安全问题，得不到文件物理路径，不用研究了。除非用的ie8-浏览器，其他高版本浏览器只能得到文件名。显示的物理路径就是一个假的路径。而且题主获取物理路径有什么用？都是获取文件信息
前端下载指定路径文件
2024-03-11 02:16

無理:)的博客采用a标签的download属性来下载，需要注意的是a标签的download属性h5才支持，使用该方法时需要注意兼容性问题。
前端能控制用户下载文件的默认存放路径吗 html5 javascript
2022-03-18 02:06

回答 4 已采纳暂时不能，这个浏览器的配置的，除非浏览器支持下载选择目录的提示这样指导确认目录这个不是前端实现的而是浏览器实现的或者你可以写个浏览器的插件
怎么给前端返回图片地址？ java 前端后端
2022-07-22 09:39

回答 2 已采纳你给前端传温度值，前端根据温度值使用不同图片就好了呀。如果非要加。每个警报那句后面加一个hashMaps.get(i).put("img", "图片路径");
前端下载文件时让用户选择存哪，怎么实现？ chrome firefox javascript vue.js
2021-01-08 10:30

回答 4 已采纳就我所知前端代码做不了这件事，必须是客户浏览器才能进行设置。不同浏览器可能不太一样。
前端实现点击路径下载
2020-07-10 05:50

无限进步的博客实现某个节点点击下载 1.外面包裹a标签 <!DOCTYPE html> <html> <body> <p>点击 W3School 的 logo 来下载该图片：<p> <a href="/i/w3school_logo_white.gif" download="w3logo"&...
关于web前端绝对路径使用的问题 html5
2017-01-09 05:36

回答 7 已采纳我觉得是你的斜线写错了，浏览器显示的是“/”,代码里应该写“\”，试一下吧
谁有好玩的前端代码路径前端
2017-08-29 23:40

回答 3 已采纳 http://abowman.com/
如何通过前端按钮调用后端的方法 html 前端后端
2022-06-23 08:16

回答 2 已采纳 ajax请求后端url
前端文件下载和文件读取方法研究
2024-03-01 12:13

Carlos_sam的博客之前因为工作需要对geojson进行数据处理，在操作的过程中我就发现，自己手动去下载和读取文件就很麻烦。因此我就想在这里探讨一下如何在前端实现文件自动读取和下载。
前端：相对路径与绝对路径解析
2022-02-28 13:38

今天敲代码了吗 ><的博客相对路径：相对于当前文件所在目录的路径 ./ 表示当前文件所在目录如：在B.html 文件中：<a href = "./C/D.html"></a> 这样就可以访问到C文件夹里面的文件 ../表示当前文件所在目录的上级目录如：在...
前端实现下载文件的方法汇总
2023-03-01 03:57

莞棠兮的博客但是前端要根据后端返回的内容，来选择下载文件的具体方法。通常情况下，后端要么给你`返回文件的网络地址`，要么`返回文件流`。返回地址一般用在静态文件上，比如图片和音视频资源等；返回文件流一般用在动态文件上...
【前端】选择本地文件夹路径/目录的方法以及相关代码
2021-12-08 03:27

sunshine_程序媛的博客 1.关于选择本地文件夹路径，我试过原始的方法，获取到的是所有当前文件夹下的所有文件，而且如果当前文件夹下无内容，选择文件夹后是不触发事件的，就更拿不到路径了。所以得另辟蹊径。以下是vue框架里使用的： ...
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
系统已结题 8月24日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
已采纳回答 8月17日
关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
创建了问题 7月25日

前端点击下载路径选择

1条回答 默认 最新

问题事件

1条回答默认最新