如何将 blob 文件从 Javascript 传递到 ASP.net 中的服务器代码答案

【问题标题】：How would I pass a blob file from Javascript to server code behind in ASP.net如何将 blob 文件从 Javascript 传递到 ASP.net 中的服务器代码
【发布时间】：2015-09-01 10:56:23
【问题描述】：

我正在使用 recorder.js 在我的网页上录制音频，它正在创建一个代表 wav 文件的 blob。我想将此 blob 文件发送到我的 c# 服务器代码后面，以便我可以将它上传到我的天蓝色存储。我对此进行了很多研究，只能找到将 blob 发送到 php 的结果。到目前为止，这是我能找到的将 blob 发送到代码后面的唯一代码：

function upload(blob) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', './addRecord.aspx', true);
    xhr.onload = function (e) {
        var result = e.target.result;
    };
    xhr.send(blob);
}

然后在我的 Page_Load 函数后面的 addRecord.aspx 代码中：

Request.SaveAs(Server.MapPath("file.wav"), false);

当我检查我保存的文件时，我无法用任何东西打开它。该文件似乎已损坏，因此我认为我无法成功传递该文件。我还听说使用 ajax 可以很容易地做到这一点，但我不确定如何实现它。我愿意接受有关如何做到这一点的任何想法。

【问题讨论】：

如果这适用于 PHP 脚本，那么您的服务器端代码是错误的。
How can I upload files asynchronously? 的可能重复项

标签： javascript asp.net ajax blob code-behind

【解决方案1】：

您可以使用以下技术：

Base-64

您可以使用 JavaScript 上的 FileReader API 从 WAV 文件中读取内容，然后将二进制内容编码为 Base-64 以像字符串字符一样传递。

接下来是一个简单的例子：

<input type="file" id="files" name="file" />

<script>
    function handleFileSelect(evt) {
        var files = evt.target.files; // FileList object

        // Loop through the FileList and render image files as thumbnails.
        for (var i = 0, f; f = files[i]; i++) {
            // Only process audio files.
            if (!f.type.match('audio.*')) {
                continue;
            }

            var reader = new FileReader();

            // Closure to capture the file information.
            reader.onload = (function(theFile) {
                return function(e) {
                    var xhr = new XMLHttpRequest();
                    xhr.open('POST', './addRecord.aspx/MyPostMethod', true);
                    xhr.onload = function (e) {
                        var result = e.target.result;
                    };
                    xhr.send('{"blob":"' + e.target.result + '"}');
                };
            })(f);

            // Read in the image file as a data URL.
            reader.readAsDataURL(f);
        }
    }

    document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

结果类似于 Base-64 编码

希望对你有帮助

【讨论】：