Question

使用以下代码，我在下面。我想修改它，以便它将下面的blob url变量（url）转换为数据url。 Javascript Filereader应该完成工作，但我也希望使用ajax调用将其发送到数据库进行存储。

Recorder.diplayRecord = function(blob, filename) {
    var url = (window.URL || window.webkitURL).createObjectURL(blob);
    var displayRecord = document.getElementById("displayRecord");
    //link.href = url;
    var li = document.createElement('li');
    var au = document.createElement('audio');
    var hf = document.createElement('a');

    var xhr = new XMLHttpRequest;

    au.controls = true;
    au.src = url;
    hf.href = url;
    hf.download = 'audio_recording_' + new Date().getTime() + '.wav';
    hf.innerHTML = hf.download;
    while (displayRecord.lastChild) displayRecord.removeChild(displayRecord.lastChild);
    li.appendChild(au);
    li.appendChild(hf);
    displayRecord.appendChild(li);

Answer 1

尝试

Recorder.diplayRecord = function(blob, filename) {
    var url = (window.URL || window.webkitURL).createObjectURL(blob);
    var displayRecord = document.getElementById("displayRecord");
    //link.href = url;
    var li = document.createElement('li');
    var au = document.createElement('audio');
    var hf = document.createElement('a');

    var reader = new FileReader();       
    reader.onload = function(e) {
      if (e.target.readyState === 2) {
        var _data = e.target.result;
        // `POST` `data-uri`
        $.post("database/url/", {"data": _data})
        .then(
           // `success`
           function(data, textStatus) {
             console.log(textStatus)
         } 
           // `error`
         , function(jqxhr, textStatus, errorThrown) {
             console.log(textStatus, errorThrown)   
         })
       };
    };        
    reader.readAsDataURL(blob);

    au.controls = true;
    au.src = url;
    hf.href = url;
    hf.download = 'audio_recording_' + new Date().getTime() + '.wav';
    hf.innerHTML = hf.download;
    while (displayRecord.lastChild) displayRecord.removeChild(displayRecord.lastChild);
    li.appendChild(au);
    li.appendChild(hf);
    displayRecord.appendChild(li);
    // adding closing `}`
    };

见

FileReader

jQuery.post()

将博客URL转换为数据URL并将其发送到数据库进行存储

1 个答案: