4

我是 HTML、Javascript 和公司的新手，所以请原谅我问了一个可能很明显的问题。

我想构建一个网络应用程序，用户可以在其中上传音频以及一些关于他们自己的信息。我有一个看起来像这样的表格：

<form method="post" action="/add_recording" enctype="multipart/form-data">
  <label>Name: </label>
  <input type="text" name="user_name" maxlength="20" size="20" value="Joe">
  <br>
  <label>Audio File: </label>
  <input type="file" name="user_audio"/>
  <br>
  <input value="Upload" type="submit">
</form>

这行得通，但对用户不太友好：人们必须弄清楚如何创建自己的音频文件，即使他们知道如何创建，也很烦人。我想允许用户在浏览器中录制。我发现了https://github.com/mattdiamond/Recorderjs和http://webaudiodemos.appspot.com/AudioRecorder/index.html，它们看起来很酷（暂时忽略它们仅适用于最新版本的事实铬，据我所知）。

我的问题是：如何修改 recorderjs 代码，以便记录的 blob 自动上传到我的表单中，而无需用户下载文件并通过单击 type="file" 输入手动浏览到它？

我的网络开发技能非常有限，所以我会非常感谢任何帮助。我的第一个猜测是自动将音频 blob 下载到我选择的文件名，并修改表单中的 type="file" 输入以指向那里，但显然这是不可能的（从我在例如如何设置值中看到的）到 HTML 中的文件输入？）。

谢谢，

阿德里安

编辑：这里有一个类似的问题：RecorderJS 通过 AJAX 上传记录的 blob。我的问题的一种解决方案是学习 AJAX 并遵循该问题的答案。不过，我很想知道是否有任何方法可以使用老式文件输入（或更一般的 html 表单）上传 recorderjs 音频。

4

1 回答 1

5

这就是我最终这样做的方式，以防这对其他人有帮助：

function uploadForm() {
    var form = new FormData(document.getElementById("my_form"));
    form.append("user_audio_blob", audioBlob);
    var request = new XMLHttpRequest();
    var async = true;
    request.open("POST", "/my_form_handler", async);
    if (async) {
        request.onreadystatechange = function() {
            if(request.readyState == 4 && request.status == 200) {
                var response = null;
                try {
                    response = JSON.parse(request.responseText);
                } catch (e) {
                    response = request.responseText;
                }
                uploadFormCallback(response);
            }
        }
    }
    request.send(form);
}

这和对 recorderjs 代码的轻微修改以设置 audioBlob。当我最初发布问题时，我不知道 FormData 和 form.append。

于 2013-07-08T01:25:56.050 回答