Question

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

我想构建一个webapp，用户可以上传音频和一些自己的信息。我有一个看起来像这样的表格：

<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，看起来非常酷（暂时忽略了这样一个事实，就我所知，它们只适用于最新的chrome版本。）

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

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

谢谢，

阿德里安

编辑：这里有一个类似的问题：RecorderJS uploading recorded blob via AJAX。我的问题的一个解决方案是学习AJAX并按照该问题的答案。不过，我有兴趣知道是否有任何方法可以使用老式文件输入（或更普遍的html格式）上传recorderjs音频。

Answer 1

以下是我最终如何做到这一点，如果这有助于其他任何人：

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);
}

对于设置audioBlob的recorderjs代码稍作修改。当我最初发布我不了解FormData和form.append的问题时。

使用html5上传在浏览器中录制的音频

1 个答案: