4

私はHTML、Javascript、および会社の初心者なので、おそらく明白な質問をすることを許してください.

ユーザーが音声と自分自身に関する情報をアップロードできる Web アプリケーションを構築したいと考えています。私は主に次のようなフォームを持っています:

<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を見つけました。私が知る限り、クロム）。

私の質問は、ユーザーがファイルをダウンロードして type="file" 入力をクリックして手動で参照することなく、記録された blob がフォームに自動的にアップロードされるように、recorderjs コードを変更するにはどうすればよいですか?

私の Web 開発スキルは非常に限られているため、何か助けていただければ幸いです。私の最初の推測では、オーディオブロブを選択したファイル名に自動的にダウンロードし、フォームの type="file" 入力を変更してそこを指すようにしましたが、明らかにこれは不可能です (たとえば、値を設定する方法で見たものから) HTMLで入力されたファイルに? )。

ありがとうございました、

エイドリアン

編集:ここに同様の質問があります: AJAX を介して記録された blob をアップロードする RecorderJS。私の問題に対する1つの解決策は、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 に答える