首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >带有Javascript或JQuery的自定义下载名称

带有Javascript或JQuery的自定义下载名称
EN

Stack Overflow用户
提问于 2017-06-14 22:54:11
回答 2查看 7.6K关注 0票数 5

我知道如何在HTML中使用<a href="file.jpg" download="name">块,但恐怕这个项目不适用。

我想有一个下载链接,这将(毫不奇怪)下载一个文件。我还想在屏幕上设置一个文本框,允许用户为下载的文件命名。

这个网站看起来会是这样的:

代码语言:javascript
运行
复制
Name:<input type="text" name="Name" value="Custon Name">
<br>
<button type="button">Download</button>

我希望<button>块使用onclick"function()"来下载文件。该函数将从文本框中获取文本,并在下载文件时使用它命名文件。我需要帮助的是找到一种使用Javascript或JQuery来命名文件的方法,就像download="name"那样。

我已经寻找了一段时间来做这件事,但没有运气。这个项目有可能吗?如果是的话,是如何做到的?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-06-15 00:49:11

可以通过动态创建a元素并将输入的名称设置为其download属性来实现:

代码语言:javascript
运行
复制
function downloadIt() {
  var name = document.getElementsByName("Name")[0].value;
  if (name && name !=='') {
    var link = document.createElement('a');
    link.download = name;
    link.href ="file.png";  
    link.click();
  }
}

这是一个Demo,您也可以通过JavaScript查看my answer的文件下载。

票数 5
EN

Stack Overflow用户

发布于 2017-06-14 23:12:05

你当然可以。让我们动态地在页面中添加一个隐藏链接,然后单击它,从而模拟"download“属性的效果。

HTML:

代码语言:javascript
运行
复制
Name:<input type="text" name="Name" id="myName" value="Custom Name">
<br>
<button type="button" onclick="download()">Download</button>

联署材料:

代码语言:javascript
运行
复制
function download() {
  var a = document.createElement("a");
  a.href = "myfile.png";
  a.download = document.getElementById("myName").value;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

工作示例(在Chrome上测试):https://jsfiddle.net/72qepvng/

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/44555950

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档