如何使用 HTML 5 从服务器访问和下载文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7667546/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to access and download a file from a server using HTML 5
提问by trevorhinesley
I am currently working on a website that users can download binary media files from (mainly .mp3). We need a way for a "Download" button to save the file to the user's specified location in their browser's preferences, and it needs to somehow display a progress bar.
我目前正在一个网站上工作，用户可以从中下载二进制媒体文件（主要是 .mp3）。我们需要一种方法让“下载”按钮将文件保存到用户浏览器首选项中的指定位置，并且需要以某种方式显示进度条。
Currently, all I'm worried about is finding a way to implement this using HTML5 and doing it in such a way that in future versions we will later be able to access that stream so that once we get this basic download part coded, we can somehow implement a progress bar in the future.
目前，我所担心的只是找到一种使用 HTML5 实现这一点的方法，并以这样一种方式来实现：在未来的版本中，我们以后将能够访问该流，这样一旦我们对这个基本的下载部分进行编码，我们就可以以某种方式在未来实现进度条。
I know HTML5 has a File API, but very few browsers currently allow its implementation, and we need this to work on IE 7+ and regularly used versions of Chrome and Firefox.
我知道 HTML5 有一个文件 API，但目前很少有浏览器允许它的实现，我们需要它在 IE 7+ 和经常使用的 Chrome 和 Firefox 版本上工作。
Thanks for your help!
谢谢你的帮助！
采纳答案by Jason T Featheringham
HTML5 supports the downloadattribute: http://webreflection.blogspot.com/2011/08/html5-how-to-create-downloads-on-fly.html
HTML5 支持的download属性：http: //webreflection.blogspot.com/2011/08/html5-how-to-create-downloads-on-fly.html
Example:
例子：
<a href="http://.../bad-romance.mp3" download="Bad Romance.mp3">Save "Bad Romance" to your computer</a>
Clicking on this will allow the browser to handle the download (instead of opening the file using whatever application is associated with the mimetype), including a progress bar.
单击此按钮将允许浏览器处理下载（而不是使用与 mimetype 关联的任何应用程序打开文件），包括进度条。
Note: You really want to be careful not to deviate from normal user expectation by trying to create your own implementation. This is synonymous with forcing a link to open in a new tab--it can be confusing to the user if they are expecting one behavior but receive another. In your case, try to specifically explain that this will be a "download" link, not a "play" link. The example above does this, but a "download" icon might also suffice.
注意：您确实希望通过尝试创建自己的实现来小心不要偏离正常的用户期望。这与强制在新选项卡中打开链接是同义词——如果用户期待一种行为但收到另一种行为，这可能会让用户感到困惑。在您的情况下，请尝试明确说明这将是“下载”链接，而不是“播放”链接。上面的例子做到了这一点，但“下载”图标也可能就足够了。
回答by realkstrawn93
If you want to make the download link a button instead, you can just place an <input>element inside an <a>:
如果你想让下载链接变成一个按钮，你可以<input>在一个 中放置一个元素<a>：
<a href="example.mp3" download="EnterSongNameHere.mp3">
<input type="button" value="<!-- enter song name here -->" />
</a>
And you can also use DOM to dynamically change the hrefof the element. Example from my blog, where the download button in question is basically a "Save as" button:
并且您还可以使用 DOM 来动态更改href元素的 。我博客中的示例，其中有问题的下载按钮基本上是“另存为”按钮：
<a id="downloadThisPage" download="OpenMe.html>
<input type="button" value="See for yourself" />
</a>
<script type="text/javascript">
document.getElementById("downloadThisPage").href = window.location.toString();
</script>
Hope this helps...
希望这可以帮助...
回答by Imad Ullah
Just put the downloadattribute to your anchor tag in HTML5.
只需将下载属性放在 HTML5 中的锚标记中即可。
<a href="https://www.w3schools.com/images/picture.jpg" download>Download</a>
