judas_jia 2016-08-14 17:32 采纳率: 0%
浏览 18434

前端如何实现点击下载弹出功能页面选择下载路径以及更改文件名,并获取路径、文件名

点击下载弹出功能页面选择下载路径以及更改文件名,然后确认,将路径及文件名发给后台

  • 写回答

5条回答 默认 最新

  • threenewbee 2016-08-14 17:57
    关注
    1. 下载文件名可以通过设置http响应头改变
    2. 比如Jsp中的写法
    3. response.addHeader("Content-Disposition", "attachment;filename=" + fileName);
    4. 路径这个不行,不是http协议规范规定的。
    评论
  • blueSky-fan 2020-12-08 09:55
    关注

    大佬,您好,目前我也遇到这样子的问题,请问有例子吗找了好多都行不通

    评论
  • blueSky-fan 2020-12-08 09:56
    关注

    请教楼主怎么解决的啊

     

    评论
  • 美酒没故事° 2024-10-09 05:17
    关注

    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>
    
    

    展开全部

    评论
  • qq_22668529 2016-08-14 19:03
    关注

    一般会调用浏览器自带的下载插件,不同的浏览器调用自己的下载插件不一样,有的可以选择路径和更改文件名,有的不行!具体路径传到后台还得需要你自己通过js处理

    评论
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 宝塔面板一键迁移使用不了
  • ¥15 求一个按键录像存储到内存卡的ESP32CAM代码
  • ¥15 如何单独修改下列canvas推箱子代码target参数?,插入图片代替其形状,就是哪个绿色的圆圈每关用插入的图片替代
  • ¥20 四叉树的创建和输出问题
  • ¥15 javaweb连接数据库,jsp文件加载不出来
  • ¥15 matlab关于高斯赛德尔迭代的应用编撰。(相关搜索:matlab代码|迭代法)
  • ¥15 损失匹配问题,求解答
  • ¥15 3500常用汉字书法体检测数据集下载
  • ¥15 odoo17在制造模块或采购模块良品与次品如何分流和在质检模块下如何开发
  • ¥15 Qt音乐播放器的音乐文件相对路径怎么写
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部