Javascript：表格輸入音頻到音頻下載鏈接？

Question

這是一個奇怪的問題，但這已經使我感到困惑了一段時間。

我有此音頻輸入：

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

當您提交一些音頻時，我想在此元素上添加一個下載鏈接：

<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然后顧名思義，您可以將其用作href url，因此現在已經在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：表格輸入音頻到音頻下載鏈接？

問題描述

1 個解決方案

解決方案1
1 已采納 2018-03-11 08:00:16

Javascript：表格輸入音頻到音頻下載鏈接？

問題描述

1 個解決方案

解決方案1 1 已采納 2018-03-11 08:00:16

解決方案1
1 已采納 2018-03-11 08:00:16