Javascript: 表单输入音频到音频下载link？

Question

这是一个奇怪的问题，但让我困惑了一段时间。

我有这个音频输入：

<input required type="file" id="inputAudio" accept="audio/*" onchange="downloadLink(this);">

当你提交一些音频时，我想在这个元素上添加一个下载link：

<a id="blah">Download Audio</a>

我试过做这样奇怪的事情：

function downloadLink(element) {
    var file = element.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
        var data = file.type + ";charset=utf-8," + encodeURIComponent(e.target.result);
        var link = document.getElementById("blah");
        link.href = "data:" + data;
        link.download = "someName." + file.name.split(".").pop();
    };
    reader.readAsDataURL(file);
}

然而，上述导致Chrome中的下载错误。

这里有一个 HTML 文件用于测试目的：

<!DOCTYPE html>
<html>
    <head>
        <title>Weird Problem</title>
        <script>
        function downloadLink(element) {
            var file = element.files[0];
            var reader = new FileReader();
            reader.onload = function(e) {
                var data = file.type + ";charset=utf-8," + encodeURIComponent(e.target.result);
                var link = document.getElementById("blah");
                link.href = "data:" + data;
                link.download = "someName." + file.name.split(".").pop();
            };
            reader.readAsDataURL(file);
        }
        </script>
    </head>
    <body>
        <input required type="file" id="inputAudio" accept="audio/*" onchange="downloadLink(this);">
        <a id="blah">Download Audio</a>
    </body>
</html>

编辑：我刚刚注意到您可以嵌入 HTML 文件：

function downloadLink(element) {
 var file = element.files[0];
 var reader = new FileReader();
 reader.onload = function(e) {
  var data = file.type + ";charset=utf-8," + encodeURIComponent(e.target.result);
  var link = document.getElementById("blah");
  link.href = "data:" + data;
  link.download = "someName." + file.name.split(".").pop();
 };
 reader.readAsDataURL(file);
}

<!DOCTYPE html>
<html>
 <head>
  <title>Weird Problem</title>
 </head>
 <body>
  <input required type="file" id="inputAudio" accept="audio/*" onchange="downloadLink(this);">
  <a id="blah">Download Audio</a>
 </body>
</html>

任何帮助都会很棒！

Answer 1

诀窍是你应该把它变成一个 ObjectURL 然后顾名思义你可以将它用作 url for href, 所以现在已经在 safari、Chrome、FireFox 上进行了测试：

var file = element.files[0];
var link = document.getElementById("blah");
link.href = window.URL.createObjectURL(file);
link.download = "someName." + file.name.split(".").pop();

这里是 PlayCode.io

Javascript: 表单输入音频到音频下载link？

Javascript: Form input audio to audio download link?

html

javascript

forms

filereader